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, 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。