ReactNative
React Native的安裝及項(xiàng)目創(chuàng)建、運(yùn)行
1.遺留問題解決
在走進(jìn)ReactNative的世界(1)中存在一些問題，我后來自己摸索的時(shí)候加以修正了，總結(jié)如下：
- 注意：安裝時(shí)不要使用cnpm！cnpm安裝的模塊路徑比較奇怪，packager不能正常識(shí)別！
- 安裝node.js之后，可以設(shè)置鏡像源，方便后面安裝加速。(你懂的)
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
2.安裝Yarn、React Native命令行工具 --react-native-cli
Yarn是Facebook提供的替代npm的工具，可以加速node模塊的下載。React Native的命令行工具用于執(zhí)行創(chuàng)建、初始化、更新項(xiàng)目、運(yùn)行打包服務(wù)（packager）等任務(wù)。
//在cmd中執(zhí)行命令
npm install -g yarn react-native-cli
//設(shè)置鏡像源
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
3.配置SDK和環(huán)境變量
我們可以使用Android Studio 2.0及以上的版本來下載SDK，
參見React Native 中文網(wǎng)里面寫的比較詳細(xì)，這里有點(diǎn)需要注意的是：
** adb的環(huán)境變量和SDK環(huán)境變量的設(shè)置不能共用**
//SDK的環(huán)境變量
ANDROID_HOME
E:\android_studio_tool\Android\sdk
//adb的環(huán)境變量
ADB_HOME
E:\android_studio_tool\Android\sdk\platform-tools
E:\android_studio_tool\Android\sdk\tools
4.新建項(xiàng)目并運(yùn)行
在cmd中使用命令行來新建項(xiàng)目，項(xiàng)目會(huì)新建在cmd所在的目錄，所以你可以先cd到指定目錄再創(chuàng)建項(xiàng)目
//創(chuàng)建名為：HellowReactNative的項(xiàng)目
react-native init HellowReactNative
//要進(jìn)入到項(xiàng)目里面
cd HellowReactNative
//執(zhí)行運(yùn)行命令，將項(xiàng)目發(fā)布到實(shí)現(xiàn)啟動(dòng)的模擬器或者手機(jī)
react-native run-android 或 react-native run-ios
如果執(zhí)行成功，你會(huì)看到下圖的效果，并且手機(jī)上也會(huì)運(yùn)行起來。
- 進(jìn)入項(xiàng)目，并執(zhí)行運(yùn)行命令
run-rn-pro.png
-
運(yùn)行成功
rn-run-success.png
*在手機(jī)上的效果(我是用的AS的模擬器)
rn-on-phone.png
完美運(yùn)行！
大家可以看到上面手機(jī)中多了幾個(gè)中文——歡迎來到RN的世界?。?！
原本新建的項(xiàng)目是沒有的，因?yàn)槲倚薷牧艘幌马?xiàng)目中的 index.android.js 文件，
- 1.使用Webstorm導(dǎo)入項(xiàng)目，修改index.android.js文件
rn-pro-update.png
- 2.雙擊 ** 鍵盤-R** 或者打開Menu鍵打開開發(fā)者菜單，選擇 Reload JS ，就會(huì)重新加載出你修改的內(nèi)容，不需要再次使用 react-native run-android 命令發(fā)布項(xiàng)目。
從寫完這兩篇文章，我總結(jié)了一下，React Native從0到1的大致過程：
以上內(nèi)容如有錯(cuò)誤，煩請(qǐng)指出，定當(dāng)及時(shí)修改--React Native小白一枚
