从 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.jsUnable 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 打包须要用 Xcode7. 开辟运用
除了 style 与 css 的区分和 js 无 DOM 外，其他与开辟 web 项目一致。
8. 运用实例
9. 后续
更多博客，检察 https://github.com/senntyou/blogs
版权声明：自在转载-非商用-非衍生-坚持签名（创意同享3.0许可证）
