React Native初試:Windows下Andriod環境搭建

jopen 9年前發布 | 76K 次閱讀 移動開發 React Native


最近想寫個App,又覺得Native App 太無趣了Web App又沒那么成熟然后發現了非死book在9月發布的React Native比較新奇,所以決定搗鼓看看;

React Native為非死book開源的使用Javascript與React開發Android、IOS原生跨平臺App,React也是Factbook開源的JS框架使用了虛擬DOM的概念,Factbook自己的應用如Groups也是基于React Native在國內也有淘寶iPad版本是喲個了React Native;

React Native最早支持的是Mac,for Android windows的支持9月份才剛發布還存在不少坑;

基本環境安裝

開發Android App當然首先要安裝:JDK、Android SDK配置好JDk、SDK環境變量;

安裝C++編譯環境(可以選擇Visual Studio 或mingw等),編譯nodejs的C++模塊會使用;

安裝git、安裝Node.js環境;

React-Native 安裝

如果沒有V*N最好設置npm鏡像不然及其考驗你的耐性

npm config set registry https://registry.npm.taobao.org

安裝 React-Native

npm install -g react-native-cli

創建項目

進入你希望項目存放的工作目錄,運行

react-native init HelloWorld

React Native初試:Windows下Andriod環境搭建

請耐性等待,第一次下載依賴會比較久;

運行packager

npm start或react-native start

React Native初試:Windows下Andriod環境搭建

查看 http://localhost:8081/index.android.bundle?platform=android 是否能打開;

啟動模擬器,運行adb devices查看是否設備已連接上;

保持packager開啟,另外打開一個命令行窗口,然后在工程目錄下運行

運行React Native

React Native初試:Windows下Andriod環境搭建

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

如沒有V*N要耐性等待,gradle下載一些依賴。

運行成功

React Native初試:Windows下Andriod環境搭建

生成APK

進入項目目錄進入Android目錄,在命令行運行:

gradlew assembleRelease

在React-native 0.14.2版本的時候會存在兩個坑,應該算是Bug;

在https://github.com/danhanfry/react-native-windows-apk發現了解決方案;

坑 1:

> A problem occurred starting process 'command 'react-native''

解決方案:進入項目目錄》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
}

React Native初試:Windows下Andriod環境搭建 生成成功后就可以在:android\app\build\outputs\apk目錄下看到生成的apk;

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!