在 React Native 中用两个子视图垂直填充一个视图

【问题标题】：Fill a View with two subviews verically in React Native在 React Native 中用两个子视图垂直填充一个视图
【发布时间】：2015-11-20 23:25:36
【问题描述】：

我有一个View，格式如下：

    <View ref='parentView' style={{flexDirection: 'row'}}>
      <TouchableOpacity>
        <Image/>                        
      </TouchableOpacity>

      <View ref='topView'/>
      <View ref='bottomView'/>
    </View>

TopView 和 BottomView 应该填充 ParentView，但使用都有flex: 1的风格，他们每个人都只占用其中一些文本的空间。我如何强制这些视图填充他们父母的身高是 50/50？

【问题讨论】：

你能发布一个更完整的代码示例吗？您所拥有的应该可以工作，但是很高兴看到您的样式定义。

标签： flexbox react-native

【解决方案1】：

你需要在容器上设置一个 flex 1，然后在你想用同样填充父视图的视图中，你还需要在你想要的两个子视图上设置一个相等的 flex 属性，例如 flex:1展开以填充父级。我已经使用您的代码here 设置了一个工作示例。我使用的代码也在下面供参考。

https://rnplay.org/apps/MgHtTw

<View ref='parentView' style={{flex: 1}}>

    <TouchableOpacity underlayColor="#ededed" style={{backgroundColor: "#ddd",height:50}}>
        <Text style={{textAlign:'center', fontSize:20, marginTop:17}}>Button</Text>        
    </TouchableOpacity>

    <View style={{flex:1, backgroundColor: 'red'}}>
        <View ref='topView'/>
    </View>

    <View style={{flex:1, backgroundColor: 'green'}}>
        <View ref='bottomView'/>
    </View>

</View>

【讨论】：