一、開發環境準備
1、安裝 JDK
需要 Java JDK 8 以上
配置 JDK 環境變量
2、安裝 node.js 環境
3、安裝C++環境
大多數情況下操作系統自帶C++環境,不需要手動安裝;如果運行報錯,需要手動安裝visual studio中的C++環境
4、安裝 git 環境
5、安裝 python 環境
- RN需要2.x版本的python
- 安裝時勾選自動配置環境變量
- 安裝完成,執行 python 命令,檢查是否安裝成功
6、配置 Android 環境
安裝 Android,並配置環境變量
(可以自行百度,有很多文章會詳細介紹,這裏不再贅述,一篇參考文章)
二、工具準備
1、使用npm或yarn
設置npm鏡像,使用npm或者yarn,不要使用cnpm(因爲cnpm安裝路徑比較奇怪,packger不能識別)。可以設置鏡像源爲taobao鏡像
npm5(5.0.x) 存在安裝新庫時會刪除其他庫的問題,導致項目無法正常運行。請儘量使用 yarn 代替 npm 操作。
2、安裝yarn
react-native是Facebook的,yarn也是Facebook的,因此RN默認使用yarn工具
3、安裝react-native-cli
npm install -g react-native-cli
三、使用 RN 開發
1、初始化 react-native 項目
創建新項目:
react-native init [項目名]
初始化創建完成,選擇 run 方式:
have an android emulator(模擬器) running, or a device(設備) connected
意思是:需要本地有一個安卓模擬器或者設備連接運行。
所以接下來:
1、啓動模擬器
2、在項目目錄下,使用 adb 連接模擬器:adb connect 127.0.0.1:62001
3、在項目目錄下打包: npx react-native run-android
或者react-native run-android
2、使用ReactNative打包
以上完成之後,可以執行打包命令:
react-native run-android
第一次配置好環境之後,執行這個命令會下載很多包,如果過程中出現錯誤,可能是網絡原因,可以重新執行該命令。但是若是一直會報錯,那麼可以去檢查之前的安裝和配置是否有問題。
打包成功之後,會自動安裝到手機上,當手機上出現如下界面:Welcome to React Native,表示成功。
3、項目目錄
使用的是 react 語法,但是組件使用的是 react-native 提供的組件,詳見 react native中文網
四、使用 weex 開發
1、安裝weex,創建項目
使用 Weex 快速打包,需要先安裝相關工具
1.安裝weex工具
npm install -g weex-toolkit
2.創建項目
weex create [項目名]
3.添加平臺(ios/android),項目下執行命令
weex platform add android
4.運行項目
weex run android // 第一次執行時,會花費較長時間下載相關包,之間可能出現網絡問題,要耐心等待
2、項目目錄
使用的是 vue 語法,但是組件使用的是 react-native 提供的組件,詳見 react native中文網
五、react-native 和 weex 比較
1、開發技術角度
- 技術:react-native 使用的是 react,weex 使用的是 vue
- 組件: react-native 提供的組件,詳見 react native中文網
2、運行調試角度
- 開發調試:react-native 修改代碼,連接的安卓手機或者模擬器、以及瀏覽器可以實現實時更新;weex 修改代碼,瀏覽器可以實現實時更新,但是連接的安卓手機不可以