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'与父容器一起使用。

反应原生flexbox分屏

3 个答案: