Flexbox 在React Native中用两个子视图真实地填充视图

我有以下形式的

视图

：

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

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

TopView和BottomView应该填充ParentView，但是 两者都具有flex:1的样式，它们各自只占用 为其中的一些文本留出空间。如何强制这些视图填充

---

它们的父视图高度为50/50？

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

按钮

您可以发布更完整的代码示例吗？你所拥有的应该是可行的，但是如果能看到你的风格定义就好了。

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