react-native布局和样式设置

学习交流：https://gitee.com/potato512/Learn_ReactNative

react-native学习交流QQ群：806870562

const styles = StyleSheet.create({
  // 样式名称
  nameStyle: { 
  	// 方向：默认纵向column，横向row
  	flexDirection: column,// 分行：wrap，或nowrap
  	flexWrap: wrap,// flex-start、flex-end、center、space-between、space-around
    justifyContent: 'flex-start',// flex-start、flex-end、center、stretch
    alignItems: 'flex-start',// 当一个元素定义了flex属性时，表示该元素是可伸缩的（flex的属性值大于0的时候才可伸缩）。
    flex: 1,// auto,flex-start,flex-end,center,stretch
    alignSelf: auto,// 定位：绝对定位relative，相对定位absolute，固定定位pix
    position: absolute,// 定位左边缘
    left: 10,// 定位右边缘
    right: 10,// 定位上边缘
    top: 10,// 定位下边缘
    bottom: 10,// 背景颜色
    backgroundColor: 'black',// 内边距(文字距离Text组件的边距)
    padding: 10,// 上内边距
    paddingTop: 5,// 下内边距
    paddingBottom: 5,// 左内边距
    paddingLeft: 5,// 右内边距
    paddingRight: 5,// 左右内边距
    paddingHorizontal: 10,// 下上内边距
    paddingVertical: 10,// 坐标（四周）距离四周都是 10
    margin: 10,// x 坐标 (外边距-距离左边，或右边)   ------ 与根视图的两个属性关联justifyContent & alignItems
    marginLeft: 10,marginRight: 0,// y 坐标 (外边距-距离上边，或下边)  ------ 与根视图的两个属性关联justifyContent & alignItems
    marginTop:  50,marginBottom: 30,// 字体名称(楷体、方正等)
    fontFamily:'',// 字体样式(粗体、斜体等)
    fontStyle: '',// 字体大小
    fontSize: 20,// 字体排版，即对齐方式 (auto、left、right、center、justify)
    textAlign: 'left',// 字体颜色
    color:'red',// 边框样式 (solid-固体/立方体、dotted-布满的/打点的、dashed-虚线)
    borderStyle: 'dashed',// 边框颜色
    borderColor:'red',// 边框圆角
    borderRadius: 9,// 边框宽度
    borderWidth: 1,// 上边框宽度
    borderTopWidth: 1,// 左边框宽度
    borderLeftWidth: 1,// 右边框宽度
    borderRightWidth: 1,// 下边框宽度
    borderBottomWidth: 1,// Text组件的影子颜色
    shadowColor: "red",// Text组件的影子倾斜度
    shadowOffset: 10,// 内容文本影子颜色
    textShadowColor: "red",// 前置颜色(一般用不到)tintColor: 'red',// 组件高度
    height: 85,// 组件宽度
    width: 350,// 组件最大高度,自适应宽度情况下用到maxHeight: 80,// 组件最大宽度,自适应高度情况下用到maxWidth: 80,},});

颜色设置格式

• '#f0f'(#rgb)
• '#f0fc'(#rgba)
• '#ff00ff'(#rrggbb)
• '#ff00ff00'(#rrggbbaa)
• 'rgb(255,255,255)'
• 'rgba(255,1.0)'
• 'hsl(360,100%,100%)'
• 'hsla(360,monospace;font-size:12.600000381469727px;">'transparent'
• 'red'
• 0xff00ff00(0xrrggbbaa)

Text组件的字体垂直对齐方式

1、当Text没有被其他组件包含时，设置属性lineHeight的高度等于组件的高度。

2、当Text被其他组件B包含时，可以设置其他组件B的属性justifyContent的值为center。