Huli's Blog

Learning by sharing

Lidemy 鋰學院是一個為初學者而生的線上程式課程平台,希望能以淺顯易懂的教學,帶領初學者更快速地入門程式設計。你可以直接到網站註冊,或者是追蹤 Lidemy 的粉絲專頁,就能搶先得知課程的最新消息

[教學] React Native for Android - 1: 基礎

| Comments

React Native出來已經一陣子了,而且陸陸續續被應用在許多App上,甚至還有些已經應用在production的環境
在今年九月的時候,大家引頸期盼的 Android 版本居然提早釋出!
想當初第一天的時候我興致勃勃地把example clone下來,發現弄了一陣子居然連demo都跑不起來QQ
於是只好先放棄了

但是幾個禮拜前再試了一次,跑ZhiHuDaily-React-Native這個project,很順利的就跑起來了!
之後就自己開了一個project隨手玩了一下,發現用React Native來開發還真的很方便!
就想說寫一系列的基本教學,帶大家看看React Native各個components的使用

在這篇裡面,幾乎不會教你任何事情!
這系列教學文不涵蓋前面「如何跑起來」的這些細節,我已經預設讀者有個適合開發的環境了
安裝程序直接參考官方給的那些就好,只要按部就班,不會是一件困難的事
官方教學 設置基本環境

  1. 裝homebrew
  2. brew update && brew upgrade
  3. 裝 nodejs 4.0以後版本(直接裝5.0.0就好)
  4. brew install watchman
  5. npm install -g react-native-cli

第二步很重要,請確保你的brew是最新的,載到的東西才會是最新的

官方教學 設置android相關設定

  1. 安裝JDK
  2. 安裝Android SDK
  3. 設定一些環境變數

基本上只要按著上面的兩個連結,一步一步來,就不太會出錯
如果發生問題的話,可以先看這兩個很有幫助的排除問題指南

  1. Android端10个最常见问题
  2. React Native for Android 入门老虎

很推薦第二篇,我很多問題都是看完第二篇以後才豁然開朗的

如果你已經確定都安裝完成了
新開一個folder,打上 react-native init myApp
就會幫你新建一個專案出來,這之間需要一點時間,因為要下載一堆dependencies
但是辛苦的等待是會有回報的,都執行完畢以後,輸入
cd myApp
react-native run-android(記得先把模擬器開好)

一切順利的話,你就會看到你的模擬器上面開啟了一個App,並且出現Welcome to React Native! 的字樣

如果不順利的話,一定是看到紅紅的錯誤畫面,就參考上面那兩個連結吧!

這邊先講解一些React Native的好處
首先,他的執行方式是載入一個javascript檔案然後執行
所以你的App剛開啟的時候,會出現Fetching JS buddle的字樣,就是代表他在從Server拿這份js檔案
咦?哪來的Server?其實就是你的電腦
所以你在開發的流程是:

  1. 在電腦上改code,存檔
  2. 模擬器重新載入js
  3. 模擬器從你電腦的server拿你改過的js回傳
  4. 模擬器重新執行

因為是連到電腦上的server,所以在實機開發上會有一些問題,例如說真的device連不到之類的
5.0以上可以很簡單透過:adb reverse tcp:8081 tcp:8081 這個指令改善
5.0以下的就...自求多福吧,因為我自己之前試了一下也沒成功
官方文件在這,教你怎麼在實機上跑

所以目前我覺得在模擬器上跑,或是找一隻5.0以上的手機是比較好的選擇
另外,按下menu鍵或是搖晃手機(模擬器的話按f2,mac按fn+f2)可以叫出設定選單

Dev Settings -> Auto reload on JS change 打勾
這個選項在開發的時候「一定要打開」,因為超級方便
有多方便?

你現在打開以後,模擬器開著
然後開啟myApp/index.android.js
有一段是

var myApp = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
});

我們很簡單的把它改成:

var myApp = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          I am the king of the hello-world!
        </Text>
      </View>
    );
  }
});

然後存檔
接著切回你的模擬器,發現一切都變了
上面的文字變成你剛改的那一段

這,就是React Native!

Comments

comments powered by Disqus