使用 React Native 框架可以使用相同的代码编写不同平台的应用. 在学习过程中, 既会兼顾老朋友 Android , 有要熟悉新朋友 iOS . 本文主要介绍运行 RN 的默认工程 UIExplorer .
工作环境是 Mac + VPN + Android Studio + Xcode + PyCharm + 华为P8(Android 5.0) + iPhone 6S 模拟器.
时间: 2016年4月6日, React Native 最新版, 让我们重新开始吧.
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 已经成功安装到手机中.
Android
常见错误
下载失败: 需要删除文件, 重新下载即可, 如:
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
Server
晃动 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即可.
不要关闭服务, 运行项目, 会自动加载数据.
iOS
Android 和 iOS 的配置都已经完成, 都可以运行自带 Demo - UIExplorer .
让我们继续学习新的知识吧, 运行 Hello World 是成功的一半.
本文地址: http://www.jianshu.com/p/bcaaf51a9d0b
OK, that's all! Enjoy it!
网友评论