react native笔记

329 阅读2分钟

一些适配问题

H5页面在iPhonex上面的适配问题

获取某个区域块的

RN 获取手机的这种高度

React Native获取手机的各种高度

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',