5

我正在尝试在 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>

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

4

4 回答 4

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 时遇到问题，请使用此资源，它对解决 flexbox 问题非常有帮助。希望你现在可以解决你的问题。

于 2018-03-27T20:34:02.657 回答
0

您不想使用高度属性，但使用它是实现您想要的东西的好方法。这是一个例子：

您将图像设置为屏幕高度的 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

于 2018-03-27T21:32:06.560 回答
0

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

<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>
于 2018-03-28T06:43:44.763 回答
0

考虑到你的代码在 react-native 中是必需的，而不是 react，试试这段代码

<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%'

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

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

于 2018-03-28T05:33:19.593 回答