Hybrid App是目前移動開發人員的首選平台,在前端開發過程中,能夠同時采用網頁語言和程序語言兩種進行開發,兼具Native App和Web App的諸多優點,大大降低了開發成本和難度,目前很多大型互聯網公司都在采用Hybrid App開發模式,例如:百度、網易等。
下面愛創課堂馬老師為大家介紹一下如何搭建自己的Hybrid環境,今天內容面向大多非Mac平台,所以把android作為‘Hybrid App’基礎。
准備window系統
1.安裝JDK 1.8+,並配置環境變量:
1) JAVA_HOME=你的java安裝目錄。
2) path += ‘%JAVA_HOME%\\bin’(追加bin目錄作到PATH環境變量)。
2.安裝Android Studio2.0+, 安裝Android SKD,配置環境變量:
1) ANDROID_HOME=你sdk所在目錄。
2) path += ‘%JAVA_HOME%\\platform-tools ’(追加platform-tools 目錄作到PATH環境變量)。
3、安裝Python
從官網下載並安裝python 2.7.x(3.x版本不行)
4、安裝node.js
從官網下載node.js的官方6.2版本或更高版本。
設置淘寶鏡像(或購買代理)
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
5、安裝react-native命令行工具
npm install -g react-native-cli
6、創建項目
進入你的工作目錄,運行
react-native init RN
7、在RN目錄下,確保有按照package.json安裝依賴
8、在Android Studio中導入項目的android文件夾
9、安裝Genymotion android模擬器
1) 打開官網
2) 注冊個人賬號
3) 安裝模擬器和虛擬機打包版
4) 安裝Android虛擬機鏡像(≥API23)
5)配置adb環境
10、在Android Studio的設置下,安裝genymotion插件
並配置genymotion插件指向模擬器安裝目錄
11、 運行react-native項目
CMD: react-native run-android
首次運行需要等待數分鍾並從網上下載gradle依賴。(這個過程屏幕上可能出現很多小數點,表示下載進度。這個時間可能耗時很久,也可能會不停報錯鏈接超時、連接中斷等等——取決於你的網絡狀況。所以要下載成功,請確保網絡通暢(必要時也可以翻牆)【這里也可以直接手動把下載好的依賴包,拷貝到gradle的環境目錄
C:\\Users\\Sirius\\.gradle\\wrapper\\dists\\gradle-2.14.1-all\\8bnwg5hd3w55iofp58khbp6yv目錄下,但不要解壓!!(等待運行自動解壓,大概要10分鍾)】
如果出現找不到tool.jar相關錯誤
org.gradle.java.home=C:\\\\Sirius\\\\devSoft\\\\Java\\\\jdk1.8.0_31
12、運行packager
react-native start
可以用瀏覽器訪問http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的腳本(看到很長的js代碼就對了)。第一次訪問大概需要十幾秒,並且在packager的命令行可以看到類似[====]的進度條。
如果你遇到了ERROR Watcher took too long to load的報錯,請嘗試修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js,將其中的MAX_WAIT_TIME 從25000改為更大的值(單位是毫秒)
如果啟動后報地址不對,那么可能是node_modules安裝問題,把之前的cnmp修改為npm來安裝
Android模擬器運行
1、在Android Studio中,啟動虛擬機
2、運行到服務器