反应原生布局固定宽度和拉伸剩余空间

Question

我如何在react-native中制作这样的东西？

在右边我想要一个具有固定宽度的组件，并且在左侧将所有剩余空间作为另一个组件。

Answer 1

试试这个：

<View style={{flex: 1, flexDirection: 'row'}}> 
    <View style={{ 
     backgroundColor: 'blue', 
     flexGrow: 1, 
    }}> 
     <Text>Fluid</Text> 
    </View> 
    <View style={{ 
     backgroundColor: 'red', 
     width: 100, 
    }}> 
     <Text>Fixed</Text>   
    </View> 
    </View>