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 }
其他设置，请详细看插件教程