反应本机弹性框拆分屏幕 [英] react native flexbox split screen

问题描述

我正在尝试使用flexbox拆分屏幕，但是我没有得到想要的结果，这就是我所拥有的

 <查看样式= {{flex:1}}><查看样式= {{flex:1}}> {/*屏幕的一半*/}</View>< View style = {{flex:1}}> {/*另一半*/}{/*< Swiper> */}<视图样式= {{flex:1}}> {/*另一半的四分之一*/}</View><视图样式= {{flex:1}}> {/*另一半的四分之一*/}</View><视图样式= {{flex:1}}> {/*另一半的四分之一*/}</View><视图样式= {{flex:1}}> {/*另一半的四分之一*/}</View>{/*</Swiper> */}</View></View> 

我遇到的问题是，屏幕的另一半扩展到整个屏幕的大小，它只是追加到前半部分，而没有考虑到它存在的那一半的限制

屏幕截图

我应该如何处理?

解决方案

嗯，经过一年的学习，我有点知道自己现在在React Native中做什么.

 <查看样式= {{flex:1}}><查看样式= {{backgroundColor:'gray'，flex:1}}/><查看样式= {{flex:1}}>< Swiper><查看样式= {{alignItems:'中心'，backgroundColor:红色"，justifyContent:中心"，高度:Dimensions.get('window').height/2}}><文本样式= {{颜色:'白色'}}>测试</Text></View><查看样式= {{alignItems:'中心'，backgroundColor:绿色"，justifyContent:中心"，高度:Dimensions.get('window').height/2}}><文本样式= {{颜色:'白色'}}>测试</Text></View><查看样式= {{alignItems:'中心'，backgroundColor:蓝色"，justifyContent:中心"，高度:Dimensions.get('window').height/2}}><文本样式= {{颜色:'白色'}}>测试</Text></View></Swiper></View></View> 

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?

解决方案

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>

这篇关于反应本机弹性框拆分屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！