Michael_Jheng的部落格

使用React Native,就不需要使用特殊語言或語法來定義樣式,樣式名稱與參數值跟CSS相同,所有的核心組件都接受一個名稱為style,CSS名稱要用camel方式撰寫,例如CSS中文字大小font-size,改寫成camel方式為fontSize

CSS語法參考網站:CSS reference

CSS Color語法參考網站:Color Reference

接下來修改在[筆記]安裝React-Native與創造第一個專案,所創造的專案來演示style

export default class AwesomeProject extends Component {
  render() {
    return (
      <View>
        <Text style={styles.blue}>font color blue</Text>
        <Text style={styles.fontBold}>font style bold</Text>
        <Text style={[styles.fontSize30]}>font size 30</Text>
        <Text style={[styles.blue, styles.fontBold, styles.fontSize30]}>complex display</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  blue: {
    color: 'blue',//顏色藍色
  },
  fontBold: {
    fontWeight: 'bold',//字形粗體  
  },
  fontSize30 :{
    fontSize: 30,//字形大小30  
  }
});

在Node.js command prompt執行"react-native run-android",即可安裝在模擬器或手機上演示,