RN笔记：样式布局总结

Flexbox布局

flex 弹性布局 number
用于设置弹性盒模型分配空间，比如: flex:1

flexDirection 主轴的方向 enum('row','row-reverse','column','column-reverse')

row:水平，起点在左
row-reverse :水平，起点在右
column:垂直，起点在上（默认，CSS默认为row）
column-reverse:垂直，起点在下

justifyContent 主轴对齐方式 enum('flex-start','flex-end','center','space-between','space-around')

flex-start:左对齐（默认）
flex-end :右对齐
center:居中
space-between:两端对齐
space-around：子元素两侧间隔相等

**alignItems ** 交叉轴对齐方式 enum('flex-start','flex-end','center','stretch')

flex-start:交叉轴起点对齐
flex-end :交叉轴终点对齐
center:交叉轴中点居中
stretch:占满容器高度，（默认）

结合使用实现垂直居中：
{flexDirection:'row',justifyContent:'center',alignItems :'center'}

flexWrap 轴线 enum('wrap', 'nowrap')

wrap:换行展示
nowrap :不换行

alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
alignSelf决定了元素在父元素的次轴方向的排列方式（此样式设置在子元素上），其值会覆盖父元素的alignItems的值

图片相关

加载本地图片
<Image source={require('./my-icon.png')} />
加载网络图片
<Image source={{uri: '图片地址'}} />
背景图片使用 <ImageBackground/>
tip:图片必须要设置宽高，要使图片自适应宽度高度显示，使用：react-native-fit-image
resizeMode enum('cover','contain','stretch')

cover:裁剪
contain:拉伸
stretch:原图展示
overflow enum('visible', 'hidden') 超出部分是否显示，hidden为隐藏
tintColor 着色，rgb字符串类型
opacity 透明度
设置圆角：imageStyle={{borderRadius:20}} //隐藏属性

边框

宽度

borderBottomWidth
borderTopWidth
borderRightWidth
borderLeftWidth
borderWidth

颜色

borderBottomColor
borderTopColor
borderRightColor
borderLeftColor
borderColor

外边距

marginBottom
marginTop
marginRight
marginLeft
margin

内边距

paddingBottom
paddingTop
paddingRight
paddingLeft
padding

圆角

borderTopLeftRadius
borderTopRightRadius
borderBottomLeftRadius
borderBottomRightRadius
borderRadius

样式
borderStyle：边框样式'solid'实线，'dotted'点， 'dashed'虚线

阴影（只对ios生效，可使用插件：react-native-shadow）

shadowColor
shadowOffset
shadowOpacity
shadowRadius

定位

position enum('absolute','relative')
left/top/right/bottom 偏移距离

获取当前屏幕宽/高

  import { Dimensions } from 'react-native';
  const { height, width } = Dimensions.get('window');

颜色渐变

  yarn add react-native-linear-gradient
  react-native link react-native-linear-gradient

 import LinearGradient from 'react-native-linear-gradient';
//示例
<LinearGradient colors={[‘#fff’,  '#000']} start={{x: 0, y: 0}} end={{x: 1, y: 0}} style={{height:150}}></LinearGradient >

默认情况下，渐变色的方向是从上向下的，假如你想渐变色从左向右，或者斜角渐变，就需要设置下了start ,end 参数
start:{ x: number, y: number }
end:{ x: number, y: number }
其他设置，请详细看插件教程

RN笔记：样式布局总结