react+react-native混合App開發--環境配置

一、開發環境準備

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 修改代碼,瀏覽器可以實現實時更新,但是連接的安卓手機不可以
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章