最近开始对react native开发app项目有点兴趣，于是开始研究如何玩。react native官方使用的是IDE是android studio，但是android studio对js语法支持不是很友好，个人更喜欢使用webstorm开发。网上看了许多文章，不得不吐槽一下，很多文章写得没头没尾，有些又过时了，导致开发过程踩了很多坑，现在完整的将部署开发环境及创建react native项目与打包运行过程描述一遍，希望后来的人可以省一些力气。
本次开发采用的环境为windows10+webstorm2017.2+安卓开发环境
(webstorm请使用最新版，最新版集成了react native语言支持和调试功能)
需要的开发环境主要有node.js + react native + android sdk
(因为打包运行过程主要在安卓环境中测试，所以需要android sdk， iOSer请无视)
1. 安装node.js
安装之前先检查是否已有node.js环境，在cmd 命令下输入node -v, 出现如下画面，则表示已经成功安装node.js环境
去node.js官网 下载安装包并安装，然后配置环境变量。
配置环境变量步骤： 右击此电脑--》属性--》高级设置--》环境变量，然后将变量名NODE_PATH和变量值（node.js安装目录）配置进去，这段比较简单，可以自行网上查找资料完成。
重新打开cmd窗口，输入node -v即可看到安装完成了。
2. 安装react native环境
安装react native首先要把react native项目下载下来，可以通过git clone，也可以直接下载zip包到本地解压，附上github地址：https://github.com/facebook/react-native
然后cmd命令行下进入下载好react native目录下的react-native-cli中，执行命令npm install -g，将react native命令添加到命令行中。以后就可以直接通过webstorm的console使用命令行进行打包和运行项目了。
至此，react native的开发环境已经完成，由于我们需要打包和调试安卓，所以还需要安装android sdk。
3. 安装android sdk
由于android sdk要依赖java环境，因此安装android sdk之前需要先安装jdk，这一步比较简单，可以自行查找资料完成，在cmd命令下输入java -version,看到版本号即表示jdk安装成功。
下面我们来安装android sdk， 首先下载一个sdk manager, 通过sdk manager我们可以下载及更新安卓开发所需要的所有工具包，算是非常方便的。附上下载地址：http://www.androiddevtools.cn/， 打开网站，找到SDK Tools表格，下载如图的exe文件。
安装完成后，打开sdk manager, 如图，下载如下5个包，使用什么版本自己决定：
android sdk tools,android sdk platform-tools,android sdk build-tools,android 8.1.0下面的sdk platform, extras下面的android support repository
下载完成之后，依然是配置环境变量。右击此电脑--》属性--》高级设置--》环境变量，新增一条配置，然后将sdk的路径配置进去，变量名ANDROID_HOME，变量值是你的sdk的安装目录，一般是C:\Program Files (x86)\Android\android-sdk。
至此，整个开发及调试环境已经安装完成了，可以开始了。
-------------------------------------------------我是分割线-----------------------------------------------------
接下来我们开始在webstorm下创建一个react native项目，点击工具栏File--》new--》project,可以看到如下画面
location填写你创建的项目要存放的路径，后面untitiled改成自己项目的名称，Node intercepter填写第一步node.js的安装路径，记得要选中exe的文件，create-react-app填写的是react-native-cli的地址，一般在c盘下面，自己找找看，填入这些之后，创建项目的时候就会自动使用react native生成首页代码及项目框架。
如上图，可以看到index.js就是我们的首页代码，每一个react native项目都会自带android和ios目录，里面有安卓和iOS的完整项目代码。
----------------------------------------------------小小总结一下-----------------------------------------------
从上面创建react native的步骤可以看出来，要确保一个react native项目能够正常运行，至少要完成一下步骤：
（1）正确安装node.js环境，并配置好node.js的环境变量
（2）正确安装react native环境，并将react-native-cli添加到命令行。
（3）配置项目的node interpreter地址,保证程序在node环境下运行
（4）配置项目的react-native-cli地址，确保程序通过react native运行
（5）安装android sdk，配置环境变量，打包apk，调试运行的时候会用到
tips：
（1）有些时候运行程序的时候经常会提示“提示 react-native Command `run-android` unrecognized. ...”这类的错误，就是没有将react-native-cli添加到命令行，可以在项目下执行npm install
（2）cmd命令窗口和IDE都要右键使用管理员身份运行，否则会出错
----------------------------------------------------接下来开始打包apk文件---------------------------------
前提： 打包apk文件的前提是前面的环境都已经正确安装，并且安装了对应的android sdk，项目中使用了什么版本的android sdk build-tools和SDK platform，就需要安装什么版本的，这个到时候打包的时候如果有错误提示，根据错误提示下载对应版本的包即可。
我们这里使用命令行打包，所以严格来说，打包apk跟IDE关系不大，可以在webstrom的terminal很方便的输入命令，在android studio下可使用同样的方法操作。
1. 生成签名秘钥。
由于安卓应用都需要数字签名才能安装，所以首先我们要使用jdk生成一个数字签名。
首先打开cmd命令行工具，进入jdk安装路径的bin目录下，一般是C盘的programe files，
接着在这个路径下执行命令：
keytool -genkey -v -keystore test.keystore -alias test -keyalg RSA -keysize 2048 -validity 10000
其中，test.keystore是生成的秘钥文件的名字，test是映射名，待会需要在程序中配置。
如图：
之后会提示输入秘钥口令和一些相关信息，按照提示输入即可。
这些全部操作完成之后，就可以在刚刚进入的C:\Program Files\Java\jdk1.8.0_101\bin目录下找到生成的test.keystore秘钥文件。
2. 在项目中配置秘钥文件
这个秘钥的配置是专门用于打包安卓程序的，所以全部配置在项目的android目录下。
首先找到项目根目录下的android目录，这里面包含一个完成的安卓项目，也包括打包工具gradle。将刚刚生成的test.keystore文件放在/android/app目录下，在android目录下有一个gradle.properties文件，在里面配置好秘钥相关信息，如下
MYAPP_RELEASE_STORE_FILE=你的秘钥文件名
MYAPP_RELEASE_KEY_ALIAS=你的秘钥映射名
MYAPP_RELEASE_STORE_PASSWORD=你设置的秘钥密码
MYAPP_RELEASE_KEY_PASSWORD=你设置的密码
接着将下面这段配置放在android/app/build.gradle文件中
signingConfigs {
release {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
如下图：
3. 执行打包命令
打开terminal,执行cd android命令进入到android文件夹中，然后执行
gradlew assembleRelease，等待一段时间，就可以看到在android/app/build/outputs/apk文件夹下生成了我们要的apk文件了。
tips:
（1）打包过程中可能会需要下载一些东西，很多国外的地址比较慢，有时候会下载失败，可以重试几次就能成功了。还是不行，可以先下载好，然后根据terminal提示的地址，替换成本地地址。
（2）IDE要右键使用管理员身份打开，否则会报无权限之类的错误。
（3）打包好的apk通过qq上传到手机的话会导致安装失败，建议使用其他途径。
---------》关于如何调试，可以看我的另一篇文章react native开发之使用安卓模拟器调试及hot reloading使用
网友评论