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

从 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. 前言

1. 开发时建议用 mac，由于 mac 上的 ios 模拟器能在开发时，快速的重载应用，而 android 就慢不少了

2. 开发时建议用 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 也有很强大的优点：

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

因此，一种不错的选择是：

1. 若是追求完美性能和体验的 APP，用原生的方式（androi: java, kotlin, ios: objective-c, swift）开发
2. 对性能和体验不敏感，但对人力成本敏感，而且须要快速开发的，用 react-native 开发
3. 二者能够混合开发，对性能和体验敏感的用原生的方式开发，对人力成本和时间成本敏感的用 react-native 开发

4. 决定使用何种构建方式

目前 react-native APP 的构建方式有两种：

1. 使用 Android Studio 或 Xcode 开发
2. 使用 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

可能遇到的问题

1. 若是构建出错，尝试删除项目根目录下的 .expo 文件夹以后，再试
2. 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许可证）