相关疑难解决方法(0)

我正在尝试使用 flexbox 拆分屏幕，但我没有得到我想要的结果，这就是我所拥有的

<View style={{flex: 1}}>
    <View style={{flex: 1}}>{/* half of the screen */}</View>

    <View style={{flex: 1}}>{/* the other half */}
        {/*<Swiper>*/}
            <View style={{flex: 1}}>{/* a quarter of the other half */}</View>
            <View style={{flex: 1}}>{/* a quarter of the other half */}</View>
            <View style={{flex: 1}}>{/* a quarter of the other half */}</View>
            <View style={{flex: 1}}>{/* a quarter of the other half */}</View>
        {/*</Swiper>*/}
    </View>
</View>

我遇到的问题是屏幕的另一半扩展到全屏的大小，它只是附加到前半部分而不考虑它存在的一半

截屏

我应该如何处理这个问题？

我是反应原生的新手，我试图将屏幕分为两个部分，第一部分是标题或导航栏希望有一个大约 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',
},