Windows下搭建React Native Android开发环境

    xiaoxiao2021-12-15  35

    参考的安装文档http://blog.csdn.net/u011068702/article/details/49448043

     

    第一步 安装jdk

    1 Java官网下载JDK并安装。请注意选择 x86 还是 x64 版本,将JDK的bin目录加到系统PATH环境变量。 Jdk1.7以上版本均可。        

    2 新建变量 JAVA_HOME C:\Program Files\Java\jdk1.8.0_05

    3环境变量PATH中添加 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

    4制台下输入javac,有信息输出则正确。

    第二步 安装sdk

    1安装android studio(会连同android sdk一同安装)。

    android studio官网下载链接 http://developer.android.com/tools/studio/index.html 

    2新建变量 ANDROID_HOME  E:\Android\sdk(Android: SDK Manager的位置)

    3 PATH中添加 %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

    4制台下输入android,有窗口弹出则正确。

    第三步 安装node.js

    官网下载安装node.js 4.1以上的版本。http://nodejs.cn/

    第四步 安装Git

    1下载安装Git(Git-2.6.2-64-bit或其他版本)后面创建项目需要用到,不装会报not found git错误。

    2 将Git的bin目录添加到环境变量PATH中,C:\ProgramFiles\Git\bin

    第五步 安装react-native命令行工具React-native-cli

    1下载react-native-master包并解压。 https://github.com/facebook/react-native

    2 解压路径\react-native-master\react-native-cli下打开命令行。     

    3 执行npm install –g

    第六步 创建项目

    执行命令react-native init reactNative ,自动生成reactNative文件夹。

    第七步 运行package

    node node_modules/react-native/packager/packager.js

    或react-nativestart

    第八步 配置android模拟器

    1 打开D:\Android\sdk\SDK manager      安装下列勾选的包。

    勾选要安装的工具,点击Install 1 package,package下面选中要安装的包,勾选Accept,点击Install,自动安装即可。

     

    2 安装Intel x86 Emulator Accelerator(HAXM install)后,需要手动再安装下,不然会出现HAXM is not working and emulator runs in emulation mode的错误,导致模拟器启动不了。

    进入目录D:\Android\sdk\extras\intel\Hardware_Accelerated_Execution_Manager以管理员的身份运行intelhaxm-android,安装时会提示设置内存,此内存的设置会影响模拟器创建所设置的内存。

    3 打开D:\Android\sdk\AVD manager      创建模拟器

    点创建进入以下界面,并填写配置。注意RAM的配置不能大于intelhaxm安装设置的大小。

     

    第九步 runandroid app

    解压路径\react-native-master\react-native-cli下打开再开启一个命令行窗口运行react-native run-android

    第十步 查看效果

     

    第十一步 生成bundle

    进入工程目录,运行以下命令:

    react-native bundle --platform android --minify  

     

     

    该命令的意思是将index.android.bundle下载并保存到assets资源文件夹中

    这句命令是重点,如果assets目录中不存在该文件,则打包的apk在执行时显示空白。

     

    第十二步 创建keysore(签名)

    打包的apk在未签名的情况下,在手机中(非root)是不允许安装的,所以需要创建keystore

     

    创建keystore参考的链接:

    http://jingyan.baidu.com/article/6f2f55a1971f9fb5b83e6c6d.html

     

    C:\Program Files\Java\jdk1.8.0_05\bin>keytool-genkey -alias android.keystore -keyalg RSA -validity 20000 -keystoreandroid.keystore

    密钥库口令  fnst1234

    输入 <android.keystore> 的密钥口令 fnst1234

    生成的keystore位置:

    C:\Program Files\Java\jdk1.8.0_05\bin\ android.keystore

     

    第十三步 为工程设置keysore

    官网介绍:https://facebook.github.io/react-native/docs/signed-apk-android.html

     

    编辑android/app/build.gradle 文件添加以下配置:

    signingConfigs {

           release {

               keyAlias 'android.keystore'

               keyPassword 'fnst1234'

               storeFile file('C:/Program Files/Java/jdk1.8.0_05/bin/android.keystore')

               storePassword 'fnst1234'

            }

        }

       buildTypes {

           release {

               minifyEnabled false  // Set thisto true to enable Proguard

               proguardFiles getDefaultProguardFile('proguard-android.txt'),'proguard-rules.pro'

                         signingConfig signingConfigs.release

            }

        }

    第十四步 生成发布的 APK

    进入目录D:\react_software\react-native-master\react-native-cli\reactNative\android

    执行命令 gradlew assembleRelease

    查看生成的apk文件

    D:\react_software\react-native-master\react-native-cli\reactNative\android\app\build\outputs\apk    app-release.apk

     

     

    第十五步 测试生成的APK包

    关闭所有的react native服务实例

    开启AVD模拟器

    D:\react_software\react-native-master\react-native-cli\reactNative\android\下运行 gradlew installRelease

     

    成功后,模拟器中reactNative应用已安装。

     

    第十六步 修改文件更新apk文件

     

    重复第十一、十四、十五步。

    react-native bundle --platform android --minify  

    cd android    gradlew assembleRelease

    cd android    gradlew installRelease

          

     

    转载请注明原文地址: https://ju.6miu.com/read-1000255.html

    最新回复(0)