ReactNative入門

簡介

ReactNative旨在開發過程的高效，它具有一些原生App所不具備的優勢，它的跨平臺性非常強，程式碼的複用程度非常的高，並且可以具有熱更新的能力，其次就是它的社群也在日趨的強大起來。

為什麼選擇ReactNative

縱觀國內的比較大的廠商並沒有完全的轉移到React Native，但也沒有完全的排斥說不搞React Native，所以學習這樣一個新的技能對我們有百利而無一害，在學習React Native的過程中，我們也會接觸到React這樣一個新的UI方案，同時對一些ES6，ES7新的特性也都會有接觸，總體感覺還不錯～

入門

學習React Native最好還是要有一些React JavaScript 以及原生應用的開發經驗，當然沒有也無妨，慢慢一步一步的來嘛。

目前我介紹的是針對Android端介紹的，後續也會把Ios相關的內容補上。

需要有的軟體:

• Node.js
• Android studio
• Watchman

執行：

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

知識點

專案的入口: index.android.js / index.ios.js

檢視呈現:

render() {
    return (
      <View style={cStyles.container}>
        <View style={styles.row}>
          <Text style={styles.label}>AAA</Text>
          <View style={styles.rowCount}>
            <Text style={styles.countUnit}>BBB/Text>
            <Text style={styles.price}>CCC</Text>
          </View>
        </View>
        <LinkRow label="DDD" onPress={() => {
        }}/>
        <LinkRow label="EEE" onPress={this.logout}/>
      </View>
    );
  }

我們的檢視需要寫在return()下面，並且這個下面只能有一個根View

抽出公共控制元件:

在介面中，可能我們有很多控制元件是可以複用的，如果我們不把它們抽出來的話，可能就會導致程式碼的臃腫，並且不是很利於維護，所以我們應該將公共部分抽出來。

將公用的style抽象出來

同上

推薦編譯器

• 需要測試效能的時候需要使用Android studio
• 與效能無關時，編寫程式碼時還是推薦使用WebStorm編寫程式碼

好了，就先介紹到這裡吧，在等到我有時間的時候，可以介紹一下，手寫一個tab，或者實現登入註冊的全部邏輯(包含網路框架)。