我正在尝试使用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>
我遇到的问题是屏幕的另一半扩展为占据整个屏幕的大小,它只是附加到前半部分,而没有考虑到它存在于其中的一半的界限
我该如何处理?
答案 0 :(得分:3)
<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>
答案 1 :(得分:0)
尝试将flexDirection: 'row'
样式提供给最外层的视图。
答案 2 :(得分:0)
这是我的解决方案:https://rnplay.org/apps/DQ2gxA
基本思想是将列数(在本例中为8)作为常量,然后根据需要拆分可用空间。并将flexDirection: 'row'
与父容器一起使用。