react native 學習一(環境搭配和常見錯誤的解決)

react native 學習一(環境搭配)

首頁，按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介紹，下載安裝python2、nodejs、git、Android Studio。這里前面兩個都比較好裝，android studio裝起來相當慢，其實應該只用裝sdk就行了，安裝sdk可以按http://www.androiddevtools.cn/這個里面的方式設個代理。

軟件裝好了，就是環境變量設置了，添加ANDROID_HOME的環境變量指到android sdk的目錄下，在path里添加C:\Users\Administrator\AppData\Local\Android\sdk\platform-tools，這個是為了使用adb命令行，可加可不加。

最后，就是創建react項目了

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

react-native run-android這里可能會遇到一點問題，最大可能就是找不到andrio sdk，報這個錯

Error:A problem occurred configuring project ':app'. > failed to find Build

在sdk那個目錄看下版本號是多少，\sdk\build-tools ,我的是23.0.3，但是reactnative的build.grade文件里的buildToolsVersion  是23.0.1,所以把這個值改得對應起來就行了。

好上面通過了，就起一個服務了。

react-native start

他會在本地開一個端口號為8081的http服務，http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false 打開這個地址如果能看到js代碼，就說明服務啟動成功了,如下圖

再就是在模擬器上運行app了，下載一個藍疊模擬器,里面廣告有點多，慎點就行了，上面的都弄好了后，在模擬器里有一個myProject的應用，打開，這個你應該可以看到一片紅色的錯誤代碼，如下圖：

這個時候，如果你前面的步驟都對了，那就可以點模擬器左側的搖一搖，這個時候會出現一個菜單選擇，選擇最下面的dev setting，如下圖

在這個設置里面，設置你本機的ip和端口號8081,如下圖

然后再返回到之前的應用里，這個時候，你應該就可以看到

再就是改成hello,world了，修改index.android.js里的代碼

class MyProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Hello,world.
        </Text>
        <Text style={styles.instructions}>
          To 掌心化屎
        </Text>
        <Text style={styles.instructions}>
          葉雨冰星 QQ群：5678537
        </Text>
      </View>
    );
  }
}

還是搖一搖，選中reload JS,就可以看到最新的效果了, 源碼請點擊這里：https://github.com/tianxiangbing/react-native-study

是不是很有成就感？我就整了一天，整出個hello world，好吧！！就這樣了，明天學點別的再記錄，有想一起學習react native的，可以加入Q群 77813547, 5678537