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

Question

我有以下形式的 View：

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

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

TopView 和 BottomView 应该填充 ParentView，但是都具有 flex: 1 风格，他们各自只占用 space 里面有一些文字。我如何强制填充这些视图他们 parent height-wise, 50/50?

Answer 1

你需要在container上设置一个flex 1，那么在views中你想要均等填充parent，你也需要设置一个相等的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>

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

Fill a View with two subviews verically in React Native

flexbox

react-native