反应原生 flexbox 分屏

Question

我正在尝试使用 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>

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

截屏

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

Answer 1

嗯，经过一年多的学习，我现在有点知道我在 React Native 中做了什么。

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