熟悉react native的css樣式

為react-native組件創建樣式屬性有兩種方法

第一種是在組件的style屬性中直接插入一個包含樣式屬性的js對象：

export default class App extends Component<Props> {
    render(){
 　　  return{
 　　        <View>
     　　        <Text style={{backgroundColor:'black'}}>
         　　        這是一種設置方式，即直接添加一個js對象
     　　        </Text>
     　　        <Text style={{backgroundColor:'red'}}>
         　　        在jsx語法中，遇到'{'，就會認為開始執行js，直到遇到'}'結束；
         　　        遇到'<'，就會認為需要把它編譯為html元素，直到遇到'>'結束；
    　　        </Text>
 　　        </View>
      }
   }
}

 

第二種是使用StyleSheet創建一個樣式表對象：

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>I Love React Native!</Text>
        <Text style={styles.instructions}>來吧？</Text>
        <Text style={styles.instructions}>{instructions}</Text>
        <Text style={styles.instructions}>下午練手</Text>
      </View>
    );
  },  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

屬性列表

1.寬高

width  //寬
height //高

 

2.背景顏色(backgroundColor)

backgroundColor
opacity //透明度

 

3.邊框(border)

//邊框圓角設置
borderTopLeftRadius  //左上角圓角
borderTopRightRadius //右上角的圓角
borderBottomLeftRadius //左下角的圓角
borderBottomRightRadius //右下角的圓角
borderRadius //所有角的圓角

//邊框寬度
borderLeftWidth  //左邊邊框寬度
borderRightWidth //右邊邊框寬度
borderTopWidth //頂部邊框寬度
borderBottomWidth //底部邊框寬度
borderWidth  //所有邊框寬度

//邊框顏色
borderColor //邊框顏色

 

4.外邊距(margin)

marginBottom  //距下外邊距
marginLeft  //距左外邊距
marginRight  //距右外邊距
marginTop  //距上外邊距
marginVertical  //垂直外邊距(也就是距上,距下邊距)
marginHorizontal //水平外邊距(距左,距右邊距)
margin //所有邊距

 

5.內邊距

paddingBottom  //距下內邊距
paddingLeft  //距左內邊距
paddingRight  //距右內邊距
paddingTop  //距上內邊距
paddingVertical//垂直內邊距
paddingHorizontal  //水平內邊距
padding //所有內邊距

 

6.文字

color  //文字顏色
textAlign  //對其方式 ('left','right','auto','center','justify')
fontSize //字體大小
fontStyle //字體風格 正常:'normal', 斜體:'italic'
fontWeight //字體粗細 加粗:'bold', '100', '200' 
letterSpacing //字符間距
lineHeight //行間距
textDecorationLine //字體裝飾線 下划線:'underline', 刪除線:'line-through',下划線刪除線:'underline line-through'
textDecorationStyle //字體裝飾線風格 單線:'solid' 雙線:'double' 虛線:'dotted','dashed'
textDecorationColor //字體裝飾線顏色

 

7.圖像

//圖像變換
scaleX //水平方向縮放
scaleY //垂直方向縮放
rotation //旋轉
translateX //水平方向平移
translateY //水平方向平移
resizemode  //拉伸圖片 'cover' ,'strech','contain'

 

參考鏈接：https://www.jianshu.com/p/ec95efa03312