|
上一篇教程我們一步步配置了開發(fā)RN的必備環(huán)境，這篇文章我們依然配置環(huán)境，昨天配置的是CRNA模式開發(fā)的環(huán)境，我們今天配置原生混合開發(fā)環(huán)境。
第一次寫系列教程，寫的不好，多多擔(dān)待，有錯誤歡迎評判指正。
說一下這個系列教程的目標(biāo)吧，實(shí)戰(zhàn)一個CRNA模式開發(fā)的跨平臺App打包并發(fā)布，并將這個App用原生混合開模式實(shí)現(xiàn)并打包發(fā)布。
廢話不多說開始擼碼，你準(zhǔn)備好了嗎？
環(huán)境配置
配置原生混合模式開發(fā)的環(huán)境，我們參考官網(wǎng)，官網(wǎng)介紹的比較詳細(xì)。
1.安裝 Chocolatey
Chocolatey 是window上的一個打包工具，可以通過choco xxxxx命令下載安裝一些軟件，點(diǎn)擊這里進(jìn)行下載chocolatey
第一步用管理員身份打開你的dos（命令行工具）
之后在chocolatey官網(wǎng)上拷貝命令，粘貼在這里，回車，之后等一會就會在你的windows上安裝好choco
復(fù)制這個命令在剛才管理員身份運(yùn)行的控制臺上
中途會出現(xiàn)幾個警告，時長大約需要2分鐘，
choco -v 看一下我們的版本，?? 安裝成功！
官網(wǎng)上說需要安裝python ，我印象中是不安裝也可以，之后你可以用choco xxx命令一次安裝python node yarn jdk8等必要的東西，
這些東西，在上一片文章配置的時候已經(jīng)裝了大部分，在上篇文章我們沒有安裝 jdk 和Android studio，這里大家就參考官網(wǎng)安裝吧，下面我會做一些配置上的問題，
RN中文官網(wǎng)
Yarn、React Native的命令行工具（react-native-cli）
Yarn是Facebook提供的替代npm的工具，可以加速node模塊的下載。React Native的命令行工具用于執(zhí)行創(chuàng)建、初始化、更新項(xiàng)目、運(yùn)行打包服務(wù)（packager）等任務(wù)。
npm install -g yarn react-native-cli
安裝完yarn后同理也要設(shè)置鏡像源：
yarn config set registry https://registry.npm. --global
yarn config set disturl https://npm./dist --global
如果你遇到EACCES: permission denied權(quán)限錯誤，可以嘗試運(yùn)行下面的命令（限linux系統(tǒng)）： sudo npm install -g yarn react-native-cli.
安裝完yarn之后就可以用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方庫名代替npm install --save 某第三方庫名。
Android Studio
React Native目前需要Android Studio2.0或更高版本。
Android Studio需要Java Development Kit [JDK] 1.8（暫不支持更高版本）。你可以在命令行中輸入 javac -version來查看你當(dāng)前安裝的JDK版本。如果版本不合要求，則可以到 官網(wǎng)上下載。
或是使用包管理器來安裝（比如choco install jdk8或是 apt-get install default-jdk）
Android Studio包含了運(yùn)行和測試React Native應(yīng)用所需的Android SDK和模擬器。
除非特別注明，請不要改動安裝過程中的選項(xiàng)。比如Android Studio默認(rèn)安裝了 Android Support Repository，而這也是React Native必須的（否則在react-native run-android時會報appcompat-v7包找不到的錯誤）。
確定所有安裝都勾選了，尤其是Android SDK和Android Device Emulator。
在初步安裝完成后，選擇Custom安裝項(xiàng)：
custom installation
檢查已安裝的組件，尤其是模擬器和HAXM加速驅(qū)動。
verify installs
安裝完成后，在Android Studio的歡迎界面中選擇Configure | SDK Manager。
configure sdk
在SDK Platforms窗口中，選擇Show Package Details，然后在Android 6.0 (Marshmallow)中勾選Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
platforms
在SDK Tools窗口中，選擇Show Package Details，然后在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1（必須包含有這個版本。當(dāng)然如果其他插件需要其他版本，你可以同時安裝其他多個版本）。然后還要勾選最底部的Android Support Repository.
build tools
ANDROID_HOME環(huán)境變量
確保ANDROID_HOME環(huán)境變量正確地指向了你安裝的Android SDK的路徑。
打開控制面板 -> 系統(tǒng)和安全 -> 系統(tǒng) -> 高級系統(tǒng)設(shè)置 -> 高級 -> 環(huán)境變量 -> 新建
具體的路徑可能和下圖不一致，請自行確認(rèn)。
env variable
你需要關(guān)閉現(xiàn)有的命令符提示窗口然后重新打開，這樣新的環(huán)境變量才能生效。
將Android SDK的Tools目錄添加到PATH變量中#
你可以把Android SDK的tools和platform-tools目錄添加到PATH變量中，以便在終端中運(yùn)行一些Android工具，例如android avd或是adb logcat等。
打開控制面板 -> 系統(tǒng)和安全 -> 系統(tǒng) -> 高級系統(tǒng)設(shè)置 -> 高級 -> 環(huán)境變量 -> 選中PATH -> 雙擊進(jìn)行編輯
注意你的具體路徑可能和下圖不同
測試安裝
react-native init myapp
這個過程不要懷疑時間，因?yàn)榘惭b這個真的很慢很慢
這樣就算完成了，我等了足夠十分鐘，記得當(dāng)年第一次弄的時候，等了30分鐘！ 現(xiàn)在我們切換目錄進(jìn)入項(xiàng)目，
cd myaapp
react-native run-android
這個過程中會打開Node編譯器加載解析綁定，過程也比較漫長情耐心等待！
這個過程我踩的坑比較多，主要涉及到兩個方面：
1.配置JAVA_HOME 把路徑寫錯，導(dǎo)致各種莫名其妙的問題
2.配置ANDROID_HOME 把名字寫錯，導(dǎo)致各種錯誤
3.用夜神模擬器測試，運(yùn)行項(xiàng)目跑不起來，原因adb沒有鏈接上模擬器
adb鏈接模擬器：夜神端口請用【62001】我在端口處踩過坑！
4.項(xiàng)目跑起來后報解析錯誤的紅屏
關(guān)于 紅屏這個問題，我在另一篇文章中介紹：react native中Unable to load script from assets 'index.android.bundle'解決方案
新手一般也就會遇到這幾個問題了吧，今天我把遇到的坑都羅列一下，希望可以對部分人起到幫助！
提示：你可以使用--version參數(shù)創(chuàng)建指定版本的項(xiàng)目。例如react-native init myapp--version 0.44.3。注意版本號必須精確到兩個小數(shù)點(diǎn)。
Windows用戶請注意，請不要在命令行默認(rèn)的System32目錄中init項(xiàng)目！會有各種權(quán)限限制導(dǎo)致不能運(yùn)行！
補(bǔ)充一個問題：
項(xiàng)目跑起來后，按 pagedown 刷新的時候，也會報錯，這是應(yīng)為你還么有配置夜神
如何配置，看這里
好了，這個問題就解決了
下一篇文章講一些基礎(chǔ)，之后實(shí)戰(zhàn)一個CRNA項(xiàng)目實(shí)戰(zhàn)一個原生混合開的項(xiàng)目！
后續(xù)文章持續(xù)更新，敬請期待！
文章為作者原創(chuàng)，轉(zhuǎn)載請注明出處。如果覺得對你有幫助，請推薦一下！
|
