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的值

图片相关

加载本地图片

加载网络图片

背景图片使用
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';
//示例

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

你可能感兴趣的:(RN笔记:样式布局总结)