Question

我是反应原生的新人，我试图将屏幕分成两部分，第一部分是标题或导航栏希望特定高度约为40px，第二部分是身体或应用程序的内容希望他的身高必须是手机屏幕上的可用高度，我尝试使用弹性盒方法，但它不起作用！那是我的代码：

mainContainer: {
  height: '100%',
  display: 'flex',
  flexDirection: 'column',
},
navBar: {
  display: 'flex',
  flexDirection: 'row-reverse',
  justifyContent: 'space-between',
  alignItems: 'center',
  backgroundColor: '#f1f1f1',
  height: 30,
},
body: {
  flex: 3,
  display: 'flex',
},

风格：

Insert_Date

Answer 1

只是用这种方式，我希望这会有用。

 <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF'}}>
   <View style={{flex:1, backgroundColor:"green"}}>
    <Text>hello world 1.........</Text>
    <Text>hello world 1.........</Text>
    <Text>hello world 1.........</Text>
    <Text>hello world 1.........</Text>
    </View>
      <View style={{flex:1, backgroundColor:"yellow"}}>
    <Text>hello world 2.........</Text>
    <Text>hello world 2.........</Text>
    <Text>hello world 2.........</Text>
    <Text>hello world 2.........</Text>
    </View>
  </View>

Answer 2

您的代码完美无缺。看看它在Snack上运行：https://snack.expo.io/S1LHFmFyG

您可能使用不支持百分比的旧版React Native。他们landed early this year因此您需要RN v0.42.3或更高版本才能使用它们。

^{在旁注中，有一些不必要的代码行，以防你想让它更干。默认情况下，您不需要声明display为flex，默认情况下flexDirection也设置为column，如果您想要40px的条带height 40 1}}应该是åäö，但我相信你已经意识到了这一点。}

如何将屏幕划分为反应原生的两个部分？

2 个答案: