Question

我试图在Flexbox（和React Native）中创建此布局，但我无法使其工作。具体来说，无论我做什么，左右按钮都拒绝扩展到容器宽度的50％。它们总是与其内容大小相同。

我使用嵌套容器。这些按钮位于柱状Flex容器中，该容器嵌套在一个Flex容器中，该容器也包含图像。

这是我的JSX：

  <View style={{
    display: 'flex',
    flex: 1,
    flexDirection: 'column'}}>
      <Image
        style={{flex: 1, zIndex: 1, width: '100%', height: '100%'}}
        resizeMode='cover'
        resizeMethod='resize'
        source={require('./thumbs/barry.jpg')}
      />
      <View style={{
        display: 'flex',
        flexDirection: 'row',
        flex: 0,
        width: '100%',
        height: 100}} >
          <Button style='flex: 1' title="LEFT"  onPress={() => {}} />
          <Button style='flex: 1' title="RIGHT" onPress={() => {}} />
      </View>
  </View>

非常感谢所有回复......

Answer 1

也许这会对你有所帮助：

.container{
  display: flex;
  flex-wrap: wrap;
  width: 500px;
}

.image{
  height: 500px;
  flex-basis: 100%;
  background-color: green;
}

.button{
  box-sizing: border-box;
  flex-basis: 50%;
  height: 100px;
  background-color: red;
  border: solid 1px black;
}

<div class="container">
  <div class="image"></div>
  <div class="button"></div>
  <div class="button"></div>
</div>

如果您在使用flexbox时遇到问题，请使用this resource，这对解决Flexbox问题非常有帮助。希望你现在可以解决你的问题。

Answer 2

您不想使用高度属性，但使用它是获得所需内容的好方法。这是一个例子：

您将图像设置为屏幕高度的90％，按钮容器设置为10％。

每个按钮的宽度为50％

<强> HTML

<div class="container">
  <div class="image"></div>
  <div class="buttons-container">
    <button>Action 1</button><button>Action 2</button>
  </div>
</div>

<强> CSS

* {
  box-sizing: border-box;
}

body, html {
  height: 100%;
  margin: 0;
}


.container {
  position: relative;
  width: 100%;
  height: 100%;

}

.container .image {
  width: 100%;
  height: 90%;
  background-image: url('path/to/image');
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.container .buttons-container {
  display: flex;
  height: 10%;
}

.container .buttons-container button {
  width: 50%;
}

检查示例工作 - https://codepen.io/kaiten/pen/YaYqZO

Answer 3

考虑到您的代码在react-native中是必需的而没有反应，请尝试这段代码

<View style={flex:1}>
  <Image source={require(path)} style={flex:1}>
  <View style={flex:1}>
    <View style={flex:1}>
      <Button style={flex:1,height:100} title='Left'/>
    </View>
    <View style={flex:1}>
        <Button style={flex:1,height:100} title='Right'/>
    </View>
  </View>
</View>

说明：在react-native中，您不需要在样式中提及display:flex，因为react-native始终使用flexBox。当您执行flex:1时，您的容器始终占据宽度的100％和父亲的高度，因此flex:1,height:'100%',width:'100%'无效。

在你的

中

<View style={{
        display: 'flex',
        flexDirection: 'row',
        flex: 0,
        width: '100%',
        height: 100}} >

您已完成flex:0所以这相当于width:'0%',height:'0%'

希望这能让您清楚了解所需的代码。

PS：由于<Image>宽度和高度，我写的代码可能无法正常工作。例如：如果图像的高度降低并且您已经为按钮指定了固定的高度，那么由于<Image>的高度加上<Button>的高度，因此按钮下方可能会有一些空白区域不会加起来可见的屏幕高度。

Answer 4

如果我们查看React Native的代码库，似乎Button组件不会将样式作为prop。所以问题是按钮不接受风格。所以我用视图包裹了按钮。以下是工作代码示例：

<View style={{
    flex: 1,
  }}>
    <Image
      style={{ flex:1, zIndex: 1, width: '100%', height: '100%'}}
      resizeMode='cover'
      resizeMethod='resize'
      source={require('./thumbs/barry.jpg')}
    />
    <View style={{
      flexDirection: 'row',
      height: 100}} >
      <View style={{flex:1}}>
      <Button title="LEFT"  onPress={() => {}} />
      </View>
      <View style={{flex:1}}>
        <Button title="RIGHT"  onPress={() => {}} />
      </View>
    </View>
  </View>

如何在Flexbox中创建此布局？

4 个答案: