React Native学习之运行官方项目UIExplorer (Android & iOS)

UIExplorer 官方：https://github.com/facebook/react-native/tree/master/Examples/UIExplorer

Android环境运行UIExplorer

克隆 ReactNative 项目

git clone https://github.com/facebook/react-native.git

进入react-native目录，编译android项目

方式一（不推荐）

gradlew :Examples:UIExplorer:android:app:installDebug

不推荐，因为首先会去下载gradle，比较费时，可手动安装gradle，再采用方式二。

官方下载：https://services.gradle.org/distributions/

如：https://services.gradle.org/distributions/gradle-2.14.1-all.zip

注意：Gradle 版本必须与gradle\wrapper下的一致，版本号可查看配置文件gradle-wrapper.properties

解压即可，并配置系统环境变量，配置GRADLE_HOME到你的gradle根目录当中，然后将%GRADLE_HOME%/bin（Linux 或 Mac 的是$GRADLE_HOME/bin）加到 PATH 的环境变量。

配置完成之后，运行gradle -v，检查一下是否安装无误

方式二（推荐）

前提是已经手动安装 gradle 并添加环境变量

gradle :Examples:UIExplorer:android:app:installDebug

区别：gradlew 命令是包装器，自动下载包装里定义好的gradle 版本，保证编译环境统一，而 gradle 命令是用本地的gradle

编译过程遇到的一些问题解决

Android NDK 环境配置

报错：ndk-build binary cannot be found, check if you've set $ANDROID_NDK environment variable correctly or if ndk.dir is setup in local.properties

解决：配置 Android NDK 环境

（1）官方下载android-ndk-r10e（必须使用r10版本）

下载地址：https://dl.google.com/android/repository/android-ndk-r10e-windows-x86_64.zip

（2）解压并放置于 Android Sdk 的 ndk-bundle 目录下

（3）创建 local.propertie 配置文件，配置 NDK 环境

在react-native目录下新建文件local.properties，设置 SDK 与 NDK 路径

sdk.dir=C\:\\Users\\rnapp\\AppData\\Local\\Android\\Sdk
ndk.dir=C\:\\Users\\rnapp\\AppData\\Local\\Android\\Sdk\\ndk-bundle\\android-ndk-r10e

Android NDK开发实质是 Android 应用层调用底层一些 C/C++ 的实现；DNK开发的优势是提高效率、代码保护(应用的Java SDK代码容易被反编译，而C/C++库反编译难度较大)

注：若报如下错误，解决方案是修改 NDK 的版本为r10e，不能使用较新版r12b

Execution failed for task ':ReactAndroid:buildReactNdkLib'.
> Process 'command '***\ndk-bundle\android-ndk-r12b\ndk-build.cmd'' finished with non-zero exit value 2

编译过程的大文件耗时下载

解决：手动下载，如 boost_1_57_0.zip

官方下载：https://downloads.sourceforge.net/project/boost/boost/1.57.0

放到目录：\react-native\ReactAndroid\build\downloads（若无此目录则手动创建）

具体会下载哪些文件可查看文件：react-native\ReactAndroid\build.gradle

BUILD SUCCESSFUL 后开启 packager 服务器

解决方案：在react-native目录下执行

npm install
cd packager
packager.sh

打开 ./packager/packager.sh 启动packager服务

iOS环境运行UIExplorer

直接使用 Xcode 打开UIExplorer.xcodeproj即可

报错：packager抛出异常Error: Cannot find module 'chalk'

解决方案：在react-native目录下执行

npm install