React Native：填充左右两个固定视图之间剩余区域的视图答案

【问题标题】：React Native: view that fills the remaining area between two left and right fixed viewsReact Native：填充左右两个固定视图之间剩余区域的视图
【发布时间】：2018-06-08 17:18:33
【问题描述】：

我的布局如下图所示

<View style={{flexDirection: 'row',justifyContent:'space-between'}}>

    <View style={{width:90}}></View>  //fixed left container
    <View style={{flexGrow:1}}></View>    //the center view
    <View style={{width:90}}></View>    //fixed right container

</View>

我有 3 个水平对齐的视图。 2 左右固定宽度视图。还有一个中心视图来填充剩余的中心空间。

如果中心视图内的内容很小，但当它变长时，它会将右侧视图推向右侧，从父视图中移出。

如何使中心容器填充中间空间但在它增长时不推送正确的视图？

【问题讨论】：

标签： react-native flexbox react-native-android

【解决方案1】：

将 flex: 1 添加到中心视图

【讨论】：

flexWrap 将无法工作，因为它会推动下面的内容，现在所有 3 个视图都以垂直 3 行形式出现
好的，但我认为你最好也给中间部分一个宽度属性，这样 flexWrap 就被限制在那个宽度上
如何根据屏幕尺寸为不同的东西赋予宽度
可以使用百分比，例如：width: '50%'（百分比取决于父容器）
伙计，我猜你没有理解我的问题。左右侧视图的宽度是固定的（90px + 90px），所以对于中心视图，宽度应该是（100% - 180）。不知道如何在本机反应中做到这一点。