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 AwesomeProjectcd AwesomeProjectreact-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,就可以看到最新的效果了

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

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