reactnative 布局

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, 255, 255, 1.0)’
‘hsl(360, 100%, 100%)’
‘hsla(360, 100%, 100%, 1.0)’
‘transparent’
‘red’
0xff00ff00 (0xrrggbbaa)

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

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

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