运行 React Native 的默认工程 UIExplorer

欢迎Follow我的GitHub,关注我的CSDN,未经授权,禁止转载.

使用 React Native 框架可以使用相同的代码编写不同平台的应用. 在学习过程中,既会兼顾老朋友 Android,有要熟悉新朋友 iOS . 本文主要介绍运行 RN 的默认工程 UIExplorer .

工作环境是 Mac + VPN + Android Studio + Xcode + PyCharm + 华为P8(Android 5.0) + iPhone 6S 模拟器.

时间: 2016年4月6日,React Native 最新版,让我们重新开始吧.

前置的环境配置,参考ReactNative官网的Requirements. 需要安装一些工具. 本文介绍在启动项目时,容易导致的一些问题.

---

Android配置

GitHub 的 React Native 项目,参考. RN 项目较新,问题可能会比较多,我会详细介绍,可能遇到的问题,让大家更多地了解这个有趣的项目.

下载 React Native 项目

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

进入 React Native 文件夹,编译 Android 项目.

./gradlew :Examples:UIExplorer:android:app:installDebug

可能需要下载 gradle,大小约100M+,比较慢,耐心等待.

构建完成之后,RN 的 App 已经成功安装到手机中.

常见错误

下载失败: 需要删除文件,重新下载即可,如:

Could not expand ZIP '/Users/wangchenlong/Exercises/ReactNative/react-native/ReactAndroid/build/downloads/boost_1_57_0.zip'

删除即可

rm /Users/wangchenlong/Exercises/ReactNative/react-native/ReactAndroid/build/downloads/boost_1_57_0.zip

Boost 是 Cpp 重要的库,比较大100M左右,下载较慢.

安装错误: Gradle 的编译版本过高,不兼容部分5.0+手机,需要降低版本为 1.3.

Installing APK 'app-debug.apk' on 'HUAWEI GRA-TL00 - 5.0.1' for app:debug
Error while uploading app-debug.apk : Unknown failure ([CDS]close[0])

使用 Android Studio 打开 React Native 的项目,修改最外层工程的 build.gradle 配置,降低 gradle的 build 为1.2.3版本.

buildscript {
    repositories {
        jcenter()
        mavenLocal()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:1.2.3' // 修改1.2.3
        classpath 'de.undercouch:gradle-download-task:2.0.0'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

需要重新设置 Gradle 的 Wrapper,修改为2.2版本.

Gradle version 2.2 is required. Current version is 2.11

NDK路径: 在工程的 local.properties 中,添加 NDK 的路径.

ndk.dir=/Users/wangchenlong/Installations/android-ndk-r10e

---

服务配置

安装 NPM 的插件,可能会需要权限进行存储,时间较长,耐心等待.

sudo npm install

NPM 安装 React Native 的支持库. RN 是 JavaScript 编写的,需要 Node 环境支持.

修改 ADB 的 TCP 端口号,映射为8081,针对于5.0以上手机有效.

adb reverse tcp:8081 tcp:8081

5.0以下的手机,检测当前的网络IP地址,手动添加入App.

启动服务

npm start

晃动 Android 手机,即进入菜单页面,选择 Reload JS 项,重新加载页面即可显示.

OK,Android 项目加载成功!

修改下载源

使用淘宝的 NPM 下载源,可以加快下载速度.

npm config set registry=http://registry.npm.taobao.org/

配置地址在根目录的 .npmrc 中,即

registry=http://registry.npm.taobao.org/

---

iOS配置

相比于 Android 配置的复杂性,iOS 配置比较简单. 需要升级 Xcode 的最新版本.

在 Xcode 中,启动 UIExplorer 项目中的UIExplorer.xcodeproj即可.

不要关闭服务,运行项目,会自动加载数据.

---

Android 和 iOS 的配置都已经完成,都可以运行自带 Demo - UIExplorer .

让我们继续学习新的知识吧,运行 Hello World 是成功的一半.

OK,that’s all! Enjoy it!

原始地址:
http://www.wangchenlong.org/2016/04/07/1604/071-rn-uiexplorer/
欢迎Follow我的GitHub,关注我的简书,微博,CSDN,掘金. 我已委托“维权骑士”为我的文章进行维权行动. 未经授权,禁止转载,授权或合作请留言.