反应原生 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>

我遇到的问题是屏幕的另一半扩展为全屏的大小，它只是附加到前半部分而没有考虑到它存在于其中的一半的范围

screenshot

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

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>

Answer 2

尝试将flexDirection: 'row' 样式赋予最外层视图。

Answer 3

这是我的解决方案：https://rnplay.org/apps/DQ2gxA

基本思想是将列的数量（在本例中为 8）作为常数，然后根据需要拆分可用空间。并将flexDirection: 'row' 与父容器一起使用。