寫 App 最有趣的地方除了功能好用外，我想最有成就感的地方就是把 App 打扮的漂漂亮亮的，然後去跟別人炫耀對吧，今天就來教怎麼定義屬於自己的樣式，總不能大家都長得一模一樣吧，不知道大家有沒有把第三天的 如何新增一個 React Native 專案 做完呢？ 今天的主題會延續下去喔，還沒的趕快把專案新增起來吧。

Style

顧名思義就是樣式了，先來一段簡單的樣式

import { StyleSheet } from 'react-native';
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,
  },
});

有寫過網頁的朋友，有沒有很熟悉呢? background-color 變成了 backgroundColor， font-size變成了 fontSize，感覺很像呢，只是變成了小駝峰式命名法，但是要注意喔，它根本上不是 CSS，而是 React Native 為了讓網頁開發者無痛轉移，所以讓他長得很像 CSS，有些語法在某些元件還是不支援的，像是 z-index 在 0.29 版才支援而且僅支援 IOS，要特別注意喔

如何使用

export default class HelloReactNative extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!!!!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

我們可以看到，有個每個元件上這裡先簡單介紹一下出現的兩個元件 <View>、<Text>，<View>可以看作是網頁中的 <div>，而<Text>就是放文字的文字框喔，它們都有個 style 的參數可以帶，這種可以帶參數的地方我們稱之為 props，可以用

<Text style={styles.welcome}>
    Welcome to React Native!!!!
</Text>

把剛剛定義的 welcome 樣式加上去，就像是從 JSON 裡面把 object 拿出來一樣，非常的簡單。

inline style

當然加 style 除了使用 StyleSheet.create 外還有其他方法，可以直接寫在 style props 裡面像是

<Text style={{ fontSize: 20, textAlign: 'center', margin: 10 }}>
    Welcome to React Native!!!!
</Text>

一樣可以加上樣式，但是這樣 inline 跟 StyleSheet 有什麼差別呢？
StyleSheet 有提供一些好處，他會把 style 變成 id 確保 style 不可變，而且也可以讓 style 傳入別的元件時有型別檢驗，有機會會再介紹元件的型別檢驗，讓 code 寫起來更好讀喔。

銜接樣式

style 除了傳入一個 object 外，其實他是能用陣列的，他會去後面那個 style 覆蓋下去像是

<Text style={[ styles.welcome, { color: 'red' } ]}>
    Welcome to React Native!!!!
</Text>

這樣寫就能把兩個樣式連接起來，以這個例子來說他的字就會是紅色的。
快開啟專案隨手改改看吧

OK，這裡就是 React Native Style 使用方法的簡短介紹，明天差不多就能開始來介紹 React Native 的元件，終於能動手做做東西了。

有問題依然可以來 React Native Taiwan 問問喔
創科資訊