React Native Create Views问题

Question

我有两种观点。ViewA是固定大小(60 * 60)，剩余空间为ViewB。如何在React Native中创建这些视图？下图是我想创建的样例视图。

查看我尝试过的代码：

<View style={{ width: '100%', height: 60, backgroundColor: 'green', flexDirection: 'row' }}> 
    <View style={{ backgroundColor: 'pink', flex: 2 }}/> 
    <View style={{ flex: 1, with: 60, height: 60, backgroundColor: 'purple', }}/>
</View>

​

​

Answer 1

好的，这应该行得通。从react-native导入维度。

<View style={{ display: "flex", flexDirection: "row", flex: 1 }}>
        <View style={{ width: Dimensions.get("window").width - 60, backgroundColor: "pink" }}></View>
        <View style={{ width: 60, height: 60, backgroundColor: "purple" }}></View>
    </View>

Answer 2

在顶部添加一些填充。

工作演示：https://snack.expo.io/Syp9bUrDm

<View style={{ width: '100%', height: 60, backgroundColor: 'green', flexDirection: 'row', paddingTop: 20 }}> 
      <View style={{ backgroundColor: 'pink', flex: 2 }}/> 
      <View style={{ flex: 1, width: 60, height: 60, backgroundColor: 'purple', }}/>
</View>

Answer 3

您可以使用flex来实现此概念

<View style={{ flex:1, height: 60, backgroundColor: 'green', flexDirection: 'row' }}> 
    <View style={{ backgroundColor: 'pink', flex: 0.6 }}/> 
    <View style={{ flex: 0.4, backgroundColor: 'purple', }}/>
</View>