React Native创建视图问题?

时间:2018-08-30 10:50:44

标签: reactjs react-native react-native-android react-native-ios

我有两种看法。 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>

enter image description here

4 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

在顶部添加一些填充。

工作演示: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>

答案 2 :(得分:0)

您可以将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>

答案 3 :(得分:0)

尝试这种方法

<View style={{flex:1}}>
        <View style={{ width: '100%', flex:1, height: 60, backgroundColor: 'green', flexDirection: 'row-reverse', paddingTop: 20 }}> 

            <View style={{ height: 60,width:60, backgroundColor: 'purple', }}/>
            <View style={{ height: 60,backgroundColor: 'pink', alignSelf:'stretch', flex:1 }}>

            </View> 
        </View>
      </View>

https://snack.expo.io/@saravanansivalingam/top-padding中检查这一点