0*00
- 很久以前折腾过一次ReactNative环境，但之后工作中也没有需要，便没有深入研究，经过一年多，混合开发愈发热门，近日在图书馆拿到一本《React Native跨平台移动应用开发》（第2版），看了下还蛮有趣的，虽然因为Facebook之前私跑条约，导致Apache、WordPress不再支持ReactNative，国内百度不再使用，阿里大力发展自己的Weex，详见如何看待百度要求内部全面停止使用 React / React Native?.这个事件对于RN的发展不是什么好事，不过小公司反正也不用太担心，基本上没可能和Facebook发生什么牵扯，即便实际用不到RN，学习下机制、原理也是不错的。
0*01
- 后续会尽量做一个连续的文章，记录学习RN的过程。
- 主要参考内容：
- 《React Native跨平台移动应用开发》（第2版） 作者：阙禧韬
- 图书豆瓣链接：React Native跨平台移动应用开发
- 作者GitHub：esr6n
- ReactNative中文官网：ReactNative 中文网
0*02 基础概念
- React、ReactNative、React.js是不同的概念，Facebook后来将React框架的开源许可改成了MIT，但ReactNative还是BSD+PATENTS，所以对于大公司来说，用React框架问题不大，用ReactNative就有专利的风险。（关于开源协议参见https://github.com/phodal/licenses）
- React是基础框架，是设计理念
- React.js 是在React框架基础上用来开发网页的。
- ReactNative是用来开发移动应用的
0*03 环境配置（windows10+android）
- 随着RN的更新，早期的一些配置方式已经不合适，甚至现在正在看的这本也已经不适合现在的配置方式，结合RN中文网的内容再重新记录一下。
- 准备工作
- Chocolatey 这个其实不需要，单独下载node.js和python2.X就可以
- RN目前不支持python3.X
- 准备好JDK1.8 和 Android SDK（安装Android Studio下载即可 目前AS的稳定版是3.0.1）
- 安装好node.js就可以在命令行使用npm了，如果担心速度不好，可以设置npm镜像，通过淘宝镜像下载(个人未设置)。
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
- 安装yarn和ReactNativeCLI （-g表示global）
npm install -g yarn react-native-cli
安装完yarn之后就可以用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install --save 某第三方库名。(RN中文网的说法)
通常这一步不会有太大的问题，主要是下载更新。如果有问题，现将文件都更新到最新（python、JDK基本不需要更新，主要是node.js要更新到最新，AS有稳定版也更新为稳定版）
设定好JAVA_HOME（例：D:\Program Files\Java\jdk1.8.0_131）和ANDROID_HOME（例：D:\ProgramData\Android\android-sdk）
- 初始化项目 (名称任意)
在想要创建项目的文件夹下打开命令行，输入以下命令。（文件夹路径不要有中文）
react-native init LearnRNDemo
这个过程会比较久，需要下载50-60M的文件，综合网络等因素，可能需要1min以上。
这一步如果失败，查看下是否有具体的错误，有的话针对性处理。如果没有或者就是uncaught exception，建议优先更新node.js，再重新初始化。
如果还不行，书中有两个建议，删除安装盘/users/用户名/.node-gyp 和 安装盘/users/用户名/AppData/Roaming/npm-cache (AppData是隐藏文件夹)。删除后重新初始化
如果还有问题，就需要自己针对性分析了
初始化后应该是这样的：
RN初始化完成.JPG
- 运行项目
- init完成后的图片其实说明得挺清楚的，cd到刚创建的项目目录，运行“react-native run-ios”或者“react-native run-android”，但是不建议这么做，因为自动生成的Gradle版本太低了,下载起来太费劲。。。
- 建议操作（只说windows下的android）
- 用AS打开生成的android项目
- 配置整个项目的build.gradle、模块的build.gradle和gradle-wrapper.properties
- 配置compileSdkVersion 和 buildToolsVersion 尽量是最新的或者比较新的
- 配置模块gradle文件中的插件版本（classpath 'com.android.tools.build:gradle:3.0.1'）
- 注意，AS3.0.1中远程仓库要添加google()
- properties中配置路径（distributionUrl=https://services.gradle.org/distributions/gradle-4.1-all.zip）
- 注意插件版本3.0以上要和gradle-4.0以上对应
- gradle可以单独下载再用本地地址导入，参见https://gradle.org/releases/，然后将distributionUrl=file:///D:/Gradle/gradle-4.1-all.zip
===================工程的gradle==============
apply plugin: "com.android.application"
import com.android.build.OutputFile
project.ext.react = [
entryFile: "index.js"
]
apply from: "../../node_modules/react-native/react.gradle"
def enableSeparateBuildPerCPUArchitecture = false
def enableProguardInReleaseBuilds = false
android {
compileSdkVersion 25
buildToolsVersion "27.0.3"
defaultConfig {
applicationId "com.learnrn"
minSdkVersion 19
targetSdkVersion 25
versionCode 1
versionName "1.0"
ndk {
abiFilters "armeabi-v7a", "x86"
}
}
splits {
abi {
reset()
enable enableSeparateBuildPerCPUArchitecture
universalApk false // If true, also generate a universal APK
include "armeabi-v7a", "x86"
}
}
buildTypes {
release {
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
}
}
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
variant.outputs.each { output ->
def versionCodes = ["armeabi-v7a":1, "x86":2]
def abi = output.getFilter(OutputFile.ABI)
if (abi != null) { // null for the universal-debug, universal-release variants
output.versionCodeOverride =
versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
}
}
}
}
dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:25.4.0"
compile "com.facebook.react:react-native:+" // From node_modules
}
task copyDownloadableDepsToLibs(type: Copy) {
from configurations.compile
into 'libs'
}
===================模块的gradle===============
buildscript {
repositories {
google()
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.0.1'
}
}
allprojects {
repositories {
google()
mavenLocal()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
}
===================properties============
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-4.1-all.zip
- sync一下项目，确保编译能够成功。
- 按道理直接用AS run应该可以，但是事实是不行，报找不到asset什么的。
- 在命令行运行 “react-native run-android” 也会报错，需要先把“..\LearnRN\android\app\build”中的内容全部删掉，再运行。
- 此时会下载比较多的东西，中间可能会因为下载导致失败，重新运行即可。
- 如果上面没有把gradle配置设置成最新，用默认的2.14运行，在MX4上会报错
Installing APK 'app-debug.apk`' on 'MX4 - 5.1' for app:debug
Unable to install 项目路径\android\app\build\outputs\apk\app-debug.apkcom.android.ddmlib.InstallException: Failed to install all'
- 正常此时就可以运行了，目前显示的内容是
Welcome to React Native!
To getstarted edit App.js
Double tap R on your keyboard to reload
Shake or press menu button for dev menu
解释得挺清楚的，可以通过编辑App.js来实现自己的需求
通过双击R、摇一摇等方式来显示开发清单。
和以前版本不同的是，没有区分index.android.js和index.ios.js，直接就是一个App.js
- 打开App.js，可以尝试修改下文字保存后，摇一摇手机，选择Reload，即可重新加载，无需重新编译。
如果加载中文出现乱码，请确认文档保存时选择了utf-8 +bom编码。
效果如图
rn.jpg
基本上最新的RN环境配置就是这样了。建议将这个版本打包备份起来，后续就不用再重新init和修改gradle那些了。
