如何将屏幕分为两部分? [英] How to divide screen to two parts in react-native?

问题描述

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

I'm new in react-native, and I'm trying to divide screen to tow part, the first part is the header or the navigation bar wish have a specific height about 40px the second part is the body or the content of the app wish his height must be the available height on the phone screen, I tried to use flex box method but it's not working! That's my code:

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

推荐答案

只需使用这种方式，我希望它会起作用.

just use this way, i hope this will work.

 <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>

这篇关于如何将屏幕分为两部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！