react-native源碼地址
react-native需要環(huán)境支持菠剩,首先來配置java sdk捧弃,android sdk
下載java sdk
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
接受協(xié)議违霞,并下載mac os版本
安裝brew
安裝命令如下:curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar xvz -C/usr/local --strip 1
當(dāng)brew安裝成功后,就可以隨意安裝自己想要的軟件了
例如android-sdk涧郊,命令如下:sudo brew install android-sdk
卸載的話妆艘,命令如下:sudo brew uninstall android-sdk
查看安裝軟件的話,命令如下:sudo brew search /apache/注意/apache/是使用的正則表達(dá)式批旺,用/分割汽煮。
我第一次安裝的時候提示
error: unable to unlink old '.github/CONTRIBUTING.md' (Permission denied)
error: unable to unlink old '.github/ISSUE_TEMPLATE.md' (Permission denied)
error: unable to unlink old '.github/PULL_REQUEST_TEMPLATE.md' (Permission denied)
error: unable to create symlink Library/ENV/3.2.6 (Permission denied)
error: unable to create symlink Library/ENV/4.2 (Permission denied)
fatal: cannot create directory at 'Library/ENV/4.3': Permission denied
然后執(zhí)行
sudo chown -R $USER /usr/local;
brew update
安裝成功
安裝android sdk
brew安裝成功后端仰,在Mac終端輸入 brew install android-sdk
在 .bash_profile中 配置環(huán)境變量
export ANDROID_HOME=查找到到sdk路徑export
PATH=${PATH}:${ANDROID_HOME}/tools export
PATH=${PATH}:${ANDROID_HOME}/platform-tools
命令行敲入以下,生效命令
$source ~/.bash_profile
在命令行中輸入:$ adb 查看是否配置成功
react native環(huán)境搭建
安裝nvm, node.js, watchman, flow
安裝nvm
nvm是node.js的版本管理器鞋囊,可以用nvm來安裝node.js
$brew install nvm
安裝node.js
node.js 是一個基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境。Node.js 使用了一個事件驅(qū)動译株、非阻塞式 I/O 的模型古戴,使其輕量又高效矩肩。Node.js 的包管理器 npm肃续,是全球最大的開源庫生態(tài)系統(tǒng)
直接在官網(wǎng)上下載nodejs安裝包始锚,node.js下載地址
安裝watchman,flow
Watchman 是 facebook 的一個開源項(xiàng)目棵里,它開源用來監(jiān)視文件并且記錄文件的改動情況姐呐,當(dāng)文件變更它可以觸發(fā)一些操作,例如執(zhí)行一些命令等等
Flow:Facebook 的 JavaScript 靜態(tài)類型檢查器 點(diǎn)擊了解flow更多
$brew install watchman
$brew install flow
安裝React-native-cli
React-native-cli是用來開發(fā)react native到命令行工具(比如后面用到的react-native命令)
$sudo npm install -g react-native-cli
npm是安裝成功node.js后到包管理器
環(huán)境搭建成功曙砂,接下里就要開始第一個react native的例子了
創(chuàng)建項(xiàng)目
到你的工作目錄下,敲入以下命令
$react-native init MyFirstReactNativeDemo
掛著vpn我執(zhí)行了好幾次柱告,前幾次都執(zhí)行了超過半個小時還沒動勁,切換了一個更好的網(wǎng)絡(luò)葵袭,關(guān)閉了vpn乖菱,一下子就執(zhí)行成功了
進(jìn)入到項(xiàng)目目錄下
$cd MyFirstReactNativeDemo
$react-native run-android
一開始用as的模擬器打開運(yùn)行后報錯
com.android.ddmlib.InstallException: Failed to establish session,
換成真機(jī)块请,又報錯
InstallException: Unable to upload some APKs
http://www.hacksparrow.com/react-native-android-unable-to-upload-some-apks.html
說是gradle版本有bug,我把project-gradle的版本改為2.1.2
dependencies { classpath 'com.android.tools.build:gradle:2.1.2' }
并且把
/myReactNativeDemo/android/gradle/wrapper/gradle-wrapper.properties
里面的distributionUrl 改為最新的配置地址后贸弥,又出現(xiàn)了新的錯誤- -|||
**com.android.ddmlib.InstallException: Failed to install all **
發(fā)現(xiàn)是安裝包無法安裝绵疲,有兩個解決辦法:
1.我試著從myReactNativeDemo/android/app/build/outputs/apk 把包拷到手機(jī)上臣疑,可以安裝運(yùn)行
2.將gradle中的classpath 'com.android.tools.build:gradle:2.1.2'改為1.2.3讯沈。不過在華為6plus android4.4上可以安裝,在華為p8 android 5.0上不能安裝问慎,具體原因還沒找到挤茄,挺奇怪的
could not connect to development server android
如果是真機(jī)調(diào)試,確保usb調(diào)試打開笼恰,在終端輸入命令
adb reverse tcp:8081 tcp:8081
運(yùn)行成功社证。電腦自動打開server網(wǎng)頁练湿,設(shè)備上顯示W(wǎng)elcome toReact Native。
第一個例子就運(yùn)行成功了
搖一搖搖出菜單辽俗,選擇enable live reload,在android.index.js中的改動榴捡,都是在app上進(jìn)行刷新
找資料的時候發(fā)現(xiàn)
http://reactnative.cn/docs/0.28/running-on-device-android.html#content
這個網(wǎng)站里面的中文資料比較全