文章首發(fā)地址：Solinx
http://www.solinx.co/archives/507
最近想寫個App，又覺得Native App 太無趣了Web App又沒那么成熟然后發(fā)現(xiàn)了Facebook在9月發(fā)布的React Native比較新奇，所以決定搗鼓看看奸笤； React Native為Facebook開源的使用Javascript與React開發(fā)Android丽猬、IOS原生跨平臺App杆煞，React也是Factbook開源的JS框架使用了虛擬DOM的概念寂玲，F(xiàn)actbook自己的應(yīng)用如Groups也是基于React Native在國內(nèi)也有淘寶iPad版本是喲個了React Native； React Native最早支持的是Mac染苛，for Android windows的支持9月份才剛發(fā)布還存在不少坑；
基本環(huán)境安裝
開發(fā)Android App當(dāng)然首先要安裝：JDK主到、Android SDK配置好JDk茶行、SDK環(huán)境變量； 安裝C++編譯環(huán)境（可以選擇Visual Studio 或mingw等）登钥，編譯nodejs的C++模塊會使用畔师； 安裝git、安裝Node.js環(huán)境牧牢；
React-Native 安裝
如果沒有VPN最好設(shè)置npm鏡像不然及其考驗?zāi)愕哪托詎pm config set registry https://registry.npm.taobao.org
安裝 React-Nativenpm install -g react-native-cli
創(chuàng)建項目
進(jìn)入你希望項目存放的工作目錄看锉，運行
react-native init HelloWorld
請耐性等待姿锭，第一次下載依賴會比較久；
運行packager
npm start或react-native start
查看 http://localhost:8081/index.android.bundle?platform=android 是否能打開伯铣； 啟動模擬器呻此，運行adb devices查看是否設(shè)備已連接上；保持packager開啟懂傀，另外打開一個命令行窗口趾诗，然后在工程目錄下運行
運行React Native
react-native run-android
異常：
A problem occurred configuring project ':app'.> Could not resolve all dependencies for configuration ':app:_debugCompile'.> Could not find com.android.support:appcompat-v7:23.1.1.
解決方案：安裝Android Support Repository與Android Support Library
如沒有VPN要耐性等待，gradle下載一些依賴蹬蚁。
運行成功
生成APK
進(jìn)入項目目錄進(jìn)入Android目錄恃泪，在命令行運行：
gradlew assembleRelease
在React-native 0.14.2版本的時候會存在兩個坑，應(yīng)該算是Bug犀斋；在https://github.com/danhanfry/react-native-windows-apk發(fā)現(xiàn)了解決方案贝乎；
坑 1：
A problem occurred starting process 'command 'react-native''
解決方案：進(jìn)入項目目錄》android目錄》app目錄打開react.gradle文件在文件頭加入：import org.apache.tools.ant.taskdefs.condition.Os找到
commandLine "react-native", "bundle", "--platform", "android", "--dev", "true", "--entry-file", entryFile, "--bundle-output", jsBundleFileDebug, "--assets-dest", resourcesDirDebug
修改為：
if (Os.isFamily(Os.FAMILY_WINDOWS)) { commandLine "cmd", "/c", "react-native", "bundle", "--platform", "android", "--dev", "true", "--entry-file", entryFile, "--bundle-output", jsBundleFileDebug, "--assets-dest", resourcesDirDebug} else { commandLine "react-native", "bundle", "--platform", "android", "--dev", "true", "--entry-file", entryFile, "--bundle-output", jsBundleFileDebug, "--assets-dest", resourcesDirDebug}
找到：
commandLine "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file", entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease
修改為：
if (Os.isFamily(Os.FAMILY_WINDOWS)) { commandLine "cmd","/c", "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file", entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease} else { commandLine "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file", entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease}
坑2：
Execution failed for task ':app:bundleReleaseJsAndAssets'. > Process 'command 'cmd'' finished with non-zero exit value 1
解決方案：在HelloWorld\node_modules\react-native\packager\react-packager\src\SocketInterface目錄找到index.js文件在40行左右把：
const sockPath = path.join(tmpdir,'react-packager-' + hash.digest('hex') );
修改為：
let sockPath = path.join(tmpdir,'react-packager-' + hash.digest('hex'));if (process.platform==='win32'){sockPath = sockPath.replace(/^//, '')sockPath = sockPath.replace(///g, '-')sockPath = '\\.\pipe\' + sockPath}
生成成功后就可以在：android\app\build\outputs\apk目錄下看到生成的apk；
（對于坑2叽粹，我的做法是刪除node-modules重新npm install ,然后在進(jìn)行打包览效！十分有效！)
