从 1 到完美，用 js 和 react-native 写一个 APP

jiezi

6 年前

从 1 到完美，用 js 和 react-native 写一个 APP
facebook 在 2013 年开源了 react 后，紧接着在 2015 年就又开源了 react-native，就此打开了用 js 和前端技术写原生 android&ios APP 之路。尽管到目前为止 react-native 最新版本是 0.56.0，还没有发布正式 1.0 版，但使用 react-native 开发原生 APP 的技术已经比较成熟了，很多商业公司和商业软件都在用 react-native 做开发，比如 facebook, airbnb, uber, skype 等。
另外，除了 react 在做写原生 APP 的尝试之外，vue 也在尝试，详见 vue-native。
1. 前言

开发时建议用 mac，因为 mac 上的 ios 模拟器能在开发时，快速的重载应用，而 android 就慢很多了

开发时建议用 yarn, 如果非要用 npm, 务必使用 npm < 5 版本，否则就可能遇到以下的问题（找不到 node_modules 下面的文件）：

Cannot find entry file node_modules/react-native-scripts/build/bin/crna-entry.js
Unable to resolve “react-navigation” from “App.js”
expo xde 中: Metro Bundler failed to start. (code: EMFILE)

expo xde 中: Metro Bundler failed to start. (code: EAGAIN)

2. 实现原理
react-native 在 APP 内启动并维护了一个 js UI 进程（有可能还有 js background 进程），然后把 js UI 进程中的组件及其样式映射到 APP 的原生 UI 层，这样 js UI 进程中组件的更新就立刻反应到 APP UI 进程中，而其他逻辑和数据等的状态都维持在 js UI 进程中。这样便达到了用 js 和前端技术写原生 APP 的功能。
对应 web 来看，react-native 程序只有两个部分，style 和 js，而 js 部分则分为组件和 api。
|– react-native
|– style 样式部分，对应 web 的 css 部分
|– js 部分
|– 组件预定义基础容器
|– api 对原生接口的封装
2.1 style
react-native 的 style 用来描述组件的样式、布局等，用 js 书写。它借鉴了 css 的语法，但只支持部分的语法，并且书写方式和实现方式都有很大的不同：

没有 class, id 等之类的 css 选择器
没有 px, em 等之类的 css 尺寸单位
属性名使用 HTML DOM Style 对象的语法
使用样式时只有类似于 css 的行内样式这样的写法

比如：
import React, {Component} from ‘react’;
import {StyleSheet, Text, View} from ‘react-native’;

export default class LotsOfStyles extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue</Text>
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
</View>
);
}
}

const styles = StyleSheet.create({
bigblue: {
color: ‘blue’,
fontWeight: ‘bold’,
fontSize: 30,
},
red: {
color: ‘red’,
},
});
详见 Style, StyleSheet, View Style Props, Text Style Props, Image Style Props
2.2 js
react-native 的 js 与 web 的 js 都是 javascript，这点没区别；但 react-native 的 js 只是纯 js，并不运行在浏览器环境中，也就没有 DOM，一切与 DOM 相关的语法都不可用，如 window, document 等。所以，在 web 端的纯 js 库（无 DOM）在 react-native 中同样适用，如 redux, lodash, immutable-js 等。
react-native 的 js 分为组件和接口。
组件是由 react-native 定义好的基础容器，就像 html 的标签一样，如 View, Text, Image, WebView 等。
接口是 react-native 封装好的原生 APP 的功能，如相机、存储、系统信息等。
3. 决定是否使用 react-native

尽管 react-native 提供了使用 js 和前端技术写原生 APP 的强大功能，但并不是说就可以用 react-native 代替 java, kotlin 写 android APP、objective-c, swift 写 ios APP 了，它只是提供了一个选择。
其实，从上面的实现原理中，基本上可以看出 react-native APP 是有很明显的劣势的：

性能不及原生的 APP
自由度也不及原来的 APP，因为被约束的 react-native 模式中

apk, ipa 文件变大了

但 react-native 也有很强大的优势：

开发简单、快速，入门坎比较低
跨平台，一套代码就可以在多个平台上运行

所以，一种不错的选择是：

如果追求完美性能和体验的 APP，用原生的方式（androi: java, kotlin, ios: objective-c, swift）开发
对性能和体验不敏感，但对人力成本敏感，并且需要快速开发的，用 react-native 开发
两者可以混合开发，对性能和体验敏感的用原生的方式开发，对人力成本和时间成本敏感的用 react-native 开发

4. 决定使用何种构建方式
目前 react-native APP 的构建方式有两种：

使用 Android Studio 或 Xcode 开发
使用 expo 方式开发

4.1 使用 Android Studio 或 Xcode 开发
这种方式是目前使用比较多的一种方式，不管是纯 react-native APP 还是混合型 APP（原生与 react-native 混合开发），都是适用的。
这种方式的好处是可以进行原生开发、自定义打包，但对大部分前端开发人员来说，这种方式对环境的要求比较高，需要 Android Studio 或 Xcode，并且配置复杂，入门坎很高。
初始化
# 安装 react-native-cli
npm install -g react-native-cli

# 新建项目
react-native init demo

# 切换到项目根目录
cd demo
开发
# 开启本地 `js` UI 进程服务（开发模式）
npm run start

# 运行 ios 程序
react-native run-ios

# 运行 android 程序
react-native run-android
打包 apk, ipa

# 打包 android APP 所需的 js bundle 文件
react-native bundle –platform android –dev false –entry-file index.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res/

# 打包 apk
# 按照正常的 android 打包方式进行

# 打包 ios APP 所需的 js bundle 文件
react-native bundle –platform ios –dev false –entry-file index.js –bundle-output ios/bundle/index.ios.jsbundle –assets-dest ios/bundle

# 打包 ipa
# 按照正常的 ios 打包方式进行
4.2 使用 expo 方式开发
expo 是 facebook 与 expo 合作专门为 react-native 开发的一套工具，它让 react-native 开发从 Android Studio 和 Xcode 中解放出来，使开发者只关注 react-native 开发部分，而不理会复杂的原生开发。
这种方式是目前纯 react-native APP 开发的推荐方式。
这种方式的好处是不需要 Android Studio 或 Xcode（包括开发和打包），对环境的要求低，配置简单，入门坎低，但不能进行原生开发、自定义打包。
初始化
# 安装 create-react-native-app
npm install -g create-react-native-app

# 新建项目
create-react-native-app demo

# 切换到项目根目录
cd demo
或者
# 安装 expo
npm install -g expo-cli

# 新建项目
expo init

# 切换到项目根目录
cd demo
开发
# 运行 ios 程序
npm run ios

# 运行 android 程序
npm run android
或者
# 手机上安装 expo 客户端

# 开启本地 `js` UI 进程服务（开发模式）
expo start

# 运行 ios 程序
# 用 expo 客户端扫描二维码

# 运行 android 程序
# 用 expo 客户端扫描二维码
打包 apk, ipa

# 打包 apk
expo build:android

# 打包 ipa
expo build:ios
可能遇到的问题

如果构建出错，尝试删除项目根目录下的 .expo 文件夹之后，再试

Packager is not running at …: 尝试重新打开一个终端，并尝试删除项目根目录下的 .expo 文件夹之后，再试

5. 选择合适的组件库

react-navigation: 应用导航组件

react-native-elements: UI 组件库

NativeBase: UI 组件库

react-native-vector-icons: 图标库

react-native-swiper: swiper 组件

lottie-react-native: airbnb lottie 组件

react-native-animatable: 动画组件

react-native-scrollable-tab-view: tab 组件

6. 选择合适的模板
使用 react-native init 或 create-react-native-app 初始化的项目，只是搭建好了基础的骨架，项目的其他部分需要开发者自己去搭建，如 storybook 组件预览、enzyme + jest 测试、eslint + prettier 代码矫正与优化等。
所以，选择一个合适的、已经搭建好大部分架子的模板就很受用了：

ignite: 内置了 redux、redux-saga、storybook、enzyme、jest、standard

snowflake: 内置了 redux、redux-thunk、jest、eslint

pepperoni-app-kit: 用的不多

以 ignite 举例：
# 安装 ignite-cli
npm install -g ignite-cli

# 初始化项目
ignite new demo

# 切换目录
cd demo

# 现在就可以对项目进行操作了，如添加 screen，运行程序等

# 运行 storybook 组件预览
npm run storybook

# 开启本地 `js` UI 进程服务（开发模式）
npm run start

# android 打包
npm run android:build

# ios 打包需要用 Xcode
7. 开发应用
除了 style 与 css 的区别和 js 无 DOM 外，其他与开发 web 项目一致。
8. 应用实例
diary 便是使用 expo 开发的一个日记 APP。
9. 后续
更多博客，查看 https://github.com/senntyou/blogs
作者：深予之 (@senntyou)
版权声明：自由转载 - 非商用 - 非衍生 - 保持署名（创意共享 3.0 许可证）