Windows10环境下React Native打包的个人实践

参考文档：

ReactNative 中文网

ReactNactive qq群

搭建React Native for Android Windows开发环境

最近刚刚升级了win10，发现win10环境下开发有不小的问题。主要就是管理员权限这个非常不友好的设定，导致node.js和Editplus、notepad++都出现了些问题，所以使用cmd 或者是开发工具全最好都去勾选一下管理员权限，我在用npm命令初始化rn项目时 就因为权限问题导致一直失败，原因就是npm的缓存目录设置在本地账户\AppData下，即使我给cmd授予了管理器权限依然没有作用，又看到说没有c++环境，于是又跑去装了visual Studio2015，结果还是各种报错一直没法初始化项目。

我怀疑是我网速的问题，重新安装了node.js v4.3.1 。这次改为淘宝源来安装npm，经过折腾现在已经可以正常打包，但是可能是服务器的原因 现在没法连上服务器更新代码，还再找原因。

windows 搭建React Native

安装node.js

Node.js

安装 visual Studio

编译Node.js需要C++环境， 还要安装python ，否则在init的命令时可能会警告你。

配置环境变量

Node.js

path

;C:\Program Files (x86)\nodejs\

AndroidHome

变量名

：ANDROID_HOME

变量路径：

D:\AndroidStudioSDK

path：

;%ANDROID_HOME%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

参考用具体需要看自己的安装路径

安装npm

1.安装：npm install -g cnpm --registry=https://registry.npm.taobao.org
2.测试安装成功：cnpm info connect

这个如果有淘宝源的话安装还是比较快的，

初始化项目

cd到工作空间
然后
react-native init MyFirstProject

这个安装需要较长的时间也是最容易出问题的步骤，如果安装失败可以跳过这部分直接去ReactNative.cn去下载纯净版的目录 ：纯净工作目录。我遇到到的一个主要问题就是缓冲的问题，因为无权缓冲在本地AppData目录内，所以一直报错，解决办法是设置npm的缓冲路径：

npm congig set cache "D:\cache"

如果没遇到问题可以省略这个步骤。

运行

首先cd到刚才init的目录 然后：

//启动服务
react-native start

启动完成服务后需要重新打开一个cmd窗口
4000
，执行

//运行debug到安卓手机上（模拟器也行）使用的是adb
react-native run-android

这个命令需要很长的时间去下载gradle构建项目，构建成功后会自动安装到手机上，然后晃动手机 选择 Dev Setting去设置电脑服务器的ip，设置完成后选择 reload Js重新加载代码 。本地通过android.index.js修改代码，完成后再reload js即可看到更新。

安卓打包

1、 首先在工程目录里 执行

mkdir android\app\src\main\assets

这目录是为了存储稍后的离线包。

2、使用

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

申请一个keyStore

3、设置gradle变量 将 （2）申请到的keystore文件放到android\app目录下

编辑 \ android \gradle.properties，添加如下的代码（注意：请把其中的** 替代为替换的keystore密码）

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

4.添加签名到应用的gradle配置文件

编辑你工程目录下的android/app/build.gradle

...
android {
...
defaultConfig { ... }
拷贝：signingConfigs {
release {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
buildTypes {
release {
...
拷贝：signingConfig signingConfigs.release
}
}
}

5、cd 到 项目根目录 MyFirstProject位置

运行
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

这个 命令的意思就是生产 index.android.bunlde 离线包文件，

位置就在第一步

android\app\src\main\assets

目录内

但是实际根据我的测试 即使不使用此命令签名apk一样可以正常使用。

6、cd 到 \android 目录下 使用gradle命令打签名包：

gradlew assembleRelease

打包成功后会在 android\app\build\outputs\apk内 找到app-release.apk 就是签名apk。

7、使用

gradlew installRelease

来安装签名包 进行测试。

不执行第5步一样可以将最新的js代码打包到apk中 具体原因有待调查。