前端混合App开发-react-native环境安装

移动App开发环境配置【重点】

安装最新版本的java jdk

1. 修改环境变量，新增JAVA_HOME的系统环境变量，值为C:\Program Files (x86)\Java\jdk1.8.0_112，也就是安装JDK的根目录
2. 修改系统环境变量Path，在Path之后新增%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
3. 新建系统环境变量CLASSPATH，值为.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
4. 保存所有的系统环境变量，同时退出系统环境变量配置窗口，然后运行cmd命令行工具，输入javac，如果能出现javac的命令选项，就表示配置成功！

安装Node.js环境

注意：需要安装最新的长期稳定版本，不要实验版本；安装完毕之后的node.js会自动配置到全局系统环境变量中
安装完毕后，可以输入node -v查看node版本号；

安装C++环境

大多数情况下操作系统自带C++环境，不需要手动安装C++环境；
如果运行报错，则需要手动安装visual studio中的C++环境；

安装Git环境

Git安装完毕后，会自动配置到系统环境变量中；
可以通过运行git --version来检查是否正确安装和配置了Git的环境变量；

安装Python环境

1. 注意：安装Python时候，只能安装2.×的版本，注意勾选安装界面上的Add Python to path，这样才能自动将Python安装到系统环境变量中；
2. 安装完毕之后，可以在命令行中运行python，检查是否成功安装了python。

配置安卓环境

1. 安装installer_r24.3.4-windows.exe，最好手动选择安装到C盘下的android目录
2. 打开安装的目录，将android-25、android-23(react-native必须依赖这个)解压后，放到platforms文件夹下
3. 解压platform-tools，放到platform-tools文件夹下
4. 【这一步直接忽略即可！】tools文件夹不解压覆盖也行；解压tools，放到安装根目录中
5. 解压build-tools_r23.0.1-windows.zip(react-native必须依赖这个)、build-tools_r23.0.2-windows.zip(weex必须依赖这个)和build-tools_r23.0.3-windows.zip，并将解压出来的文件夹，分别改名为版本号23.0.1、23.0.2和23.0.3；在安装目录中新建文件夹build-tools，并将改名为版本号之后的文件夹，放到新创建出来的build-tools文件夹下
6. 在安装目录中，新建extras文件夹，在extras文件夹下新建android文件夹；解压m2responsitory文件夹和support文件夹，放到新建的extras -> android文件夹下
7. 配置安装环境变量：在系统环境变量中新建ANDROID_HOME，值为android SDK Manager的安装路径C:\Users\liulongbin\AppData\Local\Android\android-sdk，紧接着，在Path中新增;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

ReactNative快速打包

1. 安装完node后建议设置npm镜像以加速后面的过程（或使用kexuesahnwgang工具）。注意：**不要使用cnpm！**cnpm安装的模块路径比较奇怪，packager不能正常识别！

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

npm config set disturl https://npm.taobao.org/dist --global

2. Yarn、React Native的命令行工具（react-native-cli）

• Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

npm install -g yarn react-native-cli

• 安装完yarn后同理也要设置镜像源：

yarn config set registry https://registry.npm.taobao.org --global

yarn config set disturl https://npm.taobao.org/dist --global

3. 运行react-native init AwesomeProject创建React-Native项目
4. 运行cd AwesomeProject切换到项目根目录中，运行adb devices来确保有设备连接到了电脑上
5. 运行react-native run-android打包编译安卓项目，并部署到模拟器或开发机中
6. 运行上一条命令之前，要确保有设备连接到了电脑上，可以运行adb devices查看当前接入的设备列表，打包好的文件，放到了android\app\build\outputs\apk目录下
7. 入坑指南

问题1：开启悬浮框权限；

问题2：Could not get BatchedBridge, make sure your bundle is packaged correctly

解决方案：在终端中，进入到项目的根目录，执行下面这段命令行：

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/

运行之前，需要确保android/app/src/main/目录下有assets文件夹，如果没有，手动创建之~，再运行上面的命令；

问题3：could not connect to development server

解决方案：晃动手机，唤起设置属性窗口，点击“Dev settings”，再点击Debuug server host 出现设置ip地址窗口，填写Ip地址和端口号8081，例如192.168.1.111:8081

命令行：

react-native init myen01

运行，第一次安装很多东西，会很慢

C:\reacttest\myen01>react-native run-android