How to divide screen to two parts in react-native?

问题

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>

Style:

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

回答1:

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>

回答2:

Your code works perfectly fine. See it running on Snack at: https://snack.expo.io/S1LHFmFyG

It's likely that you use an older version of React Native that doesn't support percentages. They landed early this year so you need RN v0.42.3 or later in order to use them.

^{On a side note, there's a few unnecessary lines of code there in case you would like to make it more DRY. You don't need to declare display as it's flex by default, flexDirection is also set to column by default, and if you want a stripe of 40px your height should be 40 but I'm sure you're aware of that.}

来源：https://stackoverflow.com/questions/47295141/how-to-divide-screen-to-two-parts-in-react-native

标签

react-native

flexbox