一些适配问题
H5页面在iPhonex上面的适配问题
获取某个区域块的
RN 获取手机的这种高度
ios SafeAreaView
SafeAreaView:
目的:是在一个“安全”的可视区域内渲染内容。
作用:会自动根据系统的各种导航栏、工具栏等预留出空间来渲染内部内容。更重要的是,它还会考虑到设备屏幕的局限,比如屏幕四周的圆角或是顶部中间不可显示的“刘海”区域。
例如,要去获取屏幕‘窗口’高度又需要兼容ios、安卓的情况
// 样式部分
container: {
flex: 1,
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'space-between',
backgroundColor: 'rgba(49, 53, 62,1)',
},
// 页面用法部分
Flexbox布局
在react native中 容器属性有5种,分别是:
- flexDirection
- justifyContent
- alignItems
- alignContent
- flexWrap
flexDirection
- column(默认值),主轴为垂直方向,起点在顶端
- column-reverse,主轴为垂直方向,起点在下端
- row,主轴为水平方向,起点在左端
- row-reverse,主轴为水平方向,起点在右端
// 样式
testBox: {
flexDirection: 'row'/ 'column',
},
testTitle: {
flex: 1,
backgroundColor: '#ff5400',
marginRight: 10/ marginBottom: 10
},
// 页面
<View style={ styles.testBox }>
<View style={ styles.testTitle}>
<Text>1</Text>
</View>
<View style={ styles.testTitle}>
<Text>2</Text>
</View>
<View style={ styles.testTitle}>
<Text>3</Text>
</View>
</View>
水平方向 row
垂直方向 column
alignItems
用于定义项目垂直方向的对齐方式
- flex-start, 沿着侧轴上的起点对齐
- flex-end,沿着侧轴上的终点对齐
- center,在侧轴方向上居中对齐
- stretch,在侧轴方向占满
//样式
testBox: {
height: 150,
flexDirection: 'row',
alignItems: 'center',
},
testTitle: {
flex: 1,
height: 75,
backgroundColor: '#ff5400',
marginRight: 10,
marginBottom: 10
},
// 页面
<View style={ styles.testBox }>
<View style={ styles.testTitle}>
<Text>1</Text>
</View>
<View style={ styles.testTitle}>
<Text>2</Text>
</View>
<View style={ styles.testTitle}>
<Text>3</Text>
</View>
</View>
justifyContent
用于定义项目在水平方向的对齐方式
- flex-start,沿着主轴方向的起始位置靠齐
- flex-end,与flex-start相反
- center
- space-between,在主轴方向上两端对齐,其中的间隔相等
- space-around,会平均分配在主轴方向上,两端保留一定的位置空间
flexWrap
- wrap,允许多行排列
- nowrap,
// 样式
testBox: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
flexWrap: 'wrap',
},
testTitle: {
width : 120,
backgroundColor: '#ff5400',
marginRight: 10,
marginBottom: 10
},
//页面
<View style={ styles.testBox }>
<View style={ styles.testTitle}>
<Text>1</Text>
</View>
<View style={ styles.testTitle}>
<Text>2</Text>
</View>
<View style={ styles.testTitle}>
<Text>3</Text>
</View>
<View style={ styles.testTitle}>
<Text>4</Text>
</View>
<View style={ styles.testTitle}>
<Text>5</Text>
</View>
<View style={ styles.testTitle}>
<Text>6</Text>
</View>
</View>
// justifyContent: 'space-between',
// justifyContent: 'space-around',