react native flexbox split screen

问题

i am trying to split the screen using flexbox, but i am not getting the result i desire, here is what i have

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

the problem that i am having is that the other half of the screen expands to take the size of the full screen, it is just appended to the first half without taking into consideration that is bounded by the half it exist in

screenshot

how should i approach this?

回答1:

Uhm, so I kind of know what I am doing in React Native now, after over a year of learning.

<View style={{ flex: 1 }}>
  <View style={{ backgroundColor: 'gray', flex: 1 }} />

  <View style={{ flex: 1 }}>
    <Swiper>
      <View
        style={{
          alignItems: 'center',
          backgroundColor: 'red',
          justifyContent: 'center',
          height: Dimensions.get('window').height / 2
        }}>
        <Text style={{ color: 'white' }}>Test</Text>
      </View>
      <View
        style={{
          alignItems: 'center',
          backgroundColor: 'green',
          justifyContent: 'center',
          height: Dimensions.get('window').height / 2
        }}>
        <Text style={{ color: 'white' }}>Test</Text>
      </View>
      <View
        style={{
          alignItems: 'center',
          backgroundColor: 'blue',
          justifyContent: 'center',
          height: Dimensions.get('window').height / 2
        }}>
        <Text style={{ color: 'white' }}>Test</Text>
      </View>
    </Swiper>
  </View>
</View>

回答2:

Try giving flexDirection: 'row' style to the outermost view.

回答3:

Here's my solution: https://rnplay.org/apps/DQ2gxA

The basic idea is that you have the amount of columns (8 in this case) as a constant and then you split the available space with your needs. And use flexDirection: 'row' with the parent containers.

来源：https://stackoverflow.com/questions/36727473/react-native-flexbox-split-screen

标签

react-native

flexbox