react-native 如何将屏幕分为两部分？答案

【问题标题】：How to divide screen to two parts in react-native?react-native 如何将屏幕分为两部分？
【发布时间】：2017-11-14 21:02:53
【问题描述】：

我是 react-native 的新手，我正在尝试将屏幕划分为两个部分，第一部分是标题或导航栏希望具有大约 40px 的特定高度第二部分是正文或内容该应用程序希望他的高度必须是手机屏幕上的可用高度，我尝试使用弹性框方法但它不起作用！这是我的代码：

<View style={styles.mainContainer}>
    <View style={styles.navBar}>
    </View>
    <View style={styles.body}>
    </View>
</View>

风格：

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',
},

【问题讨论】：

将height: '100%'更改为height: '100vh' ...或添加规则html, body { height: 100%; }

标签： react-native flexbox

【解决方案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>

【讨论】：

【解决方案2】：

您的代码运行良好。在 Snack 上运行：https://snack.expo.io/S1LHFmFyG

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

^{顺便说一句，如果你想让它更干，这里有一些不必要的代码行。你不需要声明display，因为它默认是flex，flexDirection也默认设置为column，如果你想要一个40px的条纹你的height应该是40但是我'确定你知道这一点。}

【讨论】：

以及如何检查 react-native 版本我没有找到很多资源？谢谢！
在你的项目目录中运行react-native --version。