簡介
React-native是Fackbook開源的一個(gè)技術(shù),旨在用JS及react代碼開發(fā)app,提倡組件化開發(fā)机杜,給我們提供一個(gè)個(gè)封裝好的組件供我們調(diào)用讯檐,強(qiáng)調(diào)learn once,write everywhere.
github地址:https://github.com/facebook/react-native
react-native中文網(wǎng)地址:http://reactnative.cn/docs/0.40/getting-started.html
安裝步驟
這里只說基于Android 的在Windows上的環(huán)境搭建.
1.安裝JDK
相信做android開發(fā)的電腦上本來就安裝有Java開發(fā)環(huán)境,這里不多介紹
JDK下載官網(wǎng)http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html
2.安裝SDK
因?yàn)閲鴥?nèi)網(wǎng)的原因咆疗,建議使用鏡像代理http://androiddevtools.cn/
3.安裝C++環(huán)境
可以選擇Windows SDK涧黄、cygwin或mingw,Microsoft Visual c++等其他C++環(huán)境篮昧。編譯node.js的C++模塊時(shí)需要用到。
4.安裝Node.js與Git
node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境笋妥。Node.js 使用了一個(gè)事件驅(qū)動(dòng)懊昨、非阻塞式 I/O 的模型,使其輕量又高效春宣。Node.js 的包管理器 npm酵颁,是全球最大的開源庫生態(tài)系統(tǒng)
Node.js下載地址:https://nodejs.org/en/download/
Git下載地址:https://git-for-windows.github.io/
建議設(shè)置npm鏡像以加速后面的過程(或使用科學(xué)上網(wǎng)工具)。
設(shè)置全局使用指定的鏡像
打開git-cmd.exe,直接在命令行內(nèi)輸入:
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
5.安裝React Native命令行工具
已經(jīng)在Github上下載react-native代碼的情況
比如我的react-native代碼在D://RN_software文件夾下月帝,
進(jìn)入到根目錄
D:\RN_software>cd react-native-master
進(jìn)入到react-native-cli文件夾
D:\RN_software\react-native-master>cd react-native-cli
執(zhí)行安裝操作
D:\RN_software\react-native-master>cd react-native-cli>npm install -g react-native-cli
6.創(chuàng)建項(xiàng)目
比如我在D:\RN_software\app_project創(chuàng)建文件夾用于放置工程項(xiàng)目
進(jìn)入目錄
D:\RN_software\app_project>react-native init FirstDemo
注意一定要駝峰式命名躏惋,首字母大寫
7.運(yùn)行packager 進(jìn)入工程目錄
react-native start
可以用瀏覽器訪問http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的腳本
8.準(zhǔn)備模擬器或真機(jī) 運(yùn)行android
react-native run-android
9.修改后重新加載
修改代碼之后不需要重新運(yùn)行程序,可以Reload就行嚷辅,以下兩種方式開啟
1.Android 5.0以上及更高版本簿姨,可以使用adb reverse命令
連接設(shè)備,usb在調(diào)試模式,執(zhí)行
adb reverse tcp:8081 tcp:8081 這樣就可以使用開發(fā)選項(xiàng)了
2.Android 5.0以下版本可以通過Wifi連接
- 手機(jī)和電腦連接并且兩個(gè)設(shè)備在同一個(gè)Wifi網(wǎng)絡(luò)環(huán)境下
- 采用react-native run-android運(yùn)行應(yīng)用
如果屏幕出現(xiàn)紅色沒有連接Server,則進(jìn)行以下操作 - 搖晃設(shè)備或者命令行輸入adb shell input keyevent 82扁位,打開開發(fā)者菜單
- 點(diǎn)擊Dev Settings進(jìn)入准潭,然后選擇Debug server host & port for device
- 輸入電腦的IP地址和端口號
- 回到開發(fā)者菜單,然后選擇點(diǎn)擊Reload JS
Android設(shè)備已經(jīng)去除了Menu按鍵了域仇,這時(shí)候我們可以通過搖晃設(shè)備來進(jìn)行打開菜單,然后完成應(yīng)用的重新加載刑然,調(diào)試以及其他功能
正常情況下我們可以雙擊R鍵,就可以Reload重新加載暇务,但是如果我們修改Android項(xiàng)目中的資源文件(例如res/drawable文件中圖片)或者修改Android的源代碼泼掠,那么就需要重新編譯生成應(yīng)用才可以生效。
可能遇到的問題
問題:找不到sdk 或者 無法正晨严福化 sdk路徑 解決辦法:正確配置環(huán)境變量
問題:failed to find target with hash string 'android-23' in: F:\Android_SDK 解決版本:更新23版本的sdk
問題:build成功后是紅色的:沒有連接服務(wù)器js Server
解決方法:ip地址+8081端口 例子:192.168.1.104:8081