Question

我有View以下表单：

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

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

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

Answer 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>

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

1 个答案: