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。
- 开发时建议用 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)
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 对原生接口的封装
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
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 的功能,如相机、存储、系统信息等。
尽管 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
开发
目前 react-native
APP 的构建方式有两种:
- 使用 Android Studio 或 Xcode 开发
- 使用 expo 方式开发
这种方式是目前使用比较多的一种方式,不管是纯 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
# 打包 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
expo build:android
# 打包 ipa
expo build:ios
- 如果构建出错,尝试删除项目根目录下的
.expo
文件夹之后,再试 Packager is not running at ...
: 尝试重新打开一个终端,并尝试删除项目根目录下的.expo
文件夹之后,再试
- 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 组件
使用 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
除了 style
与 css
的区别和 js
无 DOM
外,其他与开发 web
项目一致。
更多博客,查看 https://github.com/deepraining/blogs
版权声明:自由转载-非商用-非衍生-保持署名(创意共享 3.0 许可证)