從 1 到完美，用 js 和 react-native 寫一個(gè) APP

facebook 在 2013 年開源了 react 后，緊接著在 2015 年就又開源了 react-native，就此打開了用 js 和前端技術(shù)寫原生 android&ios APP 之路。盡管到目前為止 react-native 最新版本是 0.56.0，還沒有發(fā)布正式 1.0 版，但使用 react-native 開發(fā)原生 APP 的技術(shù)已經(jīng)比較成熟了，很多商業(yè)公司和商業(yè)軟件都在用 react-native 做開發(fā)，比如 facebook, airbnb, uber, skype 等。

另外，除了 react 在做寫原生 APP 的嘗試之外，vue 也在嘗試，詳見 vue-native。

1. 前言

開發(fā)時(shí)建議用 mac，因?yàn)?mac 上的 ios 模擬器能在開發(fā)時(shí)，快速的重載應(yīng)用，而 android 就慢很多了
開發(fā)時(shí)建議用 yarn, 如果非要用 npm, 務(wù)必使用 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. 實(shí)現(xiàn)原理

react-native 在 APP 內(nèi)啟動并維護(hù)了一個(gè) js UI 進(jìn)程（有可能還有 js background 進(jìn)程），然后把 js UI 進(jìn)程中的組件及其樣式映射到 APP 的原生 UI 層，這樣 js UI 進(jìn)程中組件的更新就立刻反應(yīng)到 APP UI 進(jìn)程中，而其他邏輯和數(shù)據(jù)等的狀態(tài)都維持在 js UI 進(jìn)程中。這樣便達(dá)到了用 js 和前端技術(shù)寫原生 APP 的功能。

對應(yīng) web 來看，react-native 程序只有兩個(gè)部分，style 和 js，而 js 部分則分為組件和 api。

|-- react-native
    |-- style 樣式部分，對應(yīng) web 的 css 部分
    |-- js 部分
        |-- 組件 預(yù)定義基礎(chǔ)容器
        |-- api 對原生接口的封裝

2.1 style

react-native 的 style 用來描述組件的樣式、布局等，用 js 書寫。它借鑒了 css 的語法，但只支持部分的語法，并且書寫方式和實(shí)現(xiàn)方式都有很大的不同：

沒有 class, id 等之類的 css 選擇器
沒有 px, em 等之類的 css 尺寸單位
屬性名使用 HTML DOM Style 對象的語法
使用樣式時(shí)只有類似于 css 的行內(nèi)樣式這樣的寫法

比如：

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，這點(diǎn)沒區(qū)別；但 react-native 的 js 只是純 js，并不運(yùn)行在瀏覽器環(huán)境中，也就沒有 DOM，一切與 DOM 相關(guān)的語法都不可用，如 window, document 等。所以，在 web 端的純 js 庫（無 DOM）在 react-native 中同樣適用，如 redux, lodash, immutable-js 等。

react-native 的 js 分為組件和接口。

組件是由 react-native 定義好的基礎(chǔ)容器，就像 html 的標(biāo)簽一樣，如 View, Text, Image, WebView 等。

接口是 react-native 封裝好的原生 APP 的功能，如相機(jī)、存儲、系統(tǒng)信息等。

3. 決定是否使用 `react-native`

盡管 react-native 提供了使用 js 和前端技術(shù)寫原生 APP 的強(qiáng)大功能，但并不是說就可以用 react-native 代替 java, kotlin 寫 android APP、objective-c, swift 寫 ios APP 了，它只是提供了一個(gè)選擇。

其實(shí)，從上面的實(shí)現(xiàn)原理中，基本上可以看出 react-native APP 是有很明顯的劣勢的：

性能不及原生的 APP
自由度也不及原來的 APP，因?yàn)楸患s束的 react-native 模式中
apk, ipa 文件變大了

但 react-native 也有很強(qiáng)大的優(yōu)勢：

開發(fā)簡單、快速，入門坎比較低
跨平臺，一套代碼就可以在多個(gè)平臺上運(yùn)行

所以，一種不錯(cuò)的選擇是：

如果追求完美性能和體驗(yàn)的 APP，用原生的方式（androi: java, kotlin, ios: objective-c, swift）開發(fā)
對性能和體驗(yàn)不敏感，但對人力成本敏感，并且需要快速開發(fā)的，用 react-native 開發(fā)
兩者可以混合開發(fā)，對性能和體驗(yàn)敏感的用原生的方式開發(fā)，對人力成本和時(shí)間成本敏感的用 react-native 開發(fā)

4. 決定使用何種構(gòu)建方式

目前 react-native APP 的構(gòu)建方式有兩種：

使用 Android Studio 或 Xcode 開發(fā)
使用 expo 方式開發(fā)

4.1 使用 Android Studio 或 Xcode 開發(fā)

這種方式是目前使用比較多的一種方式，不管是純 react-native APP 還是混合型 APP（原生與 react-native 混合開發(fā)），都是適用的。

這種方式的好處是可以進(jìn)行原生開發(fā)、自定義打包，但對大部分前端開發(fā)人員來說，這種方式對環(huán)境的要求比較高，需要 Android Studio 或 Xcode，并且配置復(fù)雜，入門坎很高。

初始化

# 安裝 react-native-cli
npm install -g react-native-cli

# 新建項(xiàng)目
react-native init demo

# 切換到項(xiàng)目根目錄
cd demo

開發(fā)

# 開啟本地 `js` UI 進(jìn)程服務(wù)（開發(fā)模式）
npm run start

# 運(yùn)行 ios 程序
react-native run-ios

# 運(yùn)行 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 打包方式進(jìn)行


# 打包 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 打包方式進(jìn)行

4.2 使用 expo 方式開發(fā)

expo 是 facebook 與 expo 合作專門為 react-native 開發(fā)的一套工具，它讓 react-native 開發(fā)從 Android Studio 和 Xcode 中解放出來，使開發(fā)者只關(guān)注 react-native 開發(fā)部分，而不理會復(fù)雜的原生開發(fā)。

這種方式是目前純 react-native APP 開發(fā)的推薦方式。

這種方式的好處是不需要 Android Studio 或 Xcode（包括開發(fā)和打包），對環(huán)境的要求低，配置簡單，入門坎低，但不能進(jìn)行原生開發(fā)、自定義打包。

初始化

# 安裝 create-react-native-app
npm install -g create-react-native-app

# 新建項(xiàng)目
create-react-native-app demo

# 切換到項(xiàng)目根目錄
cd demo

或者

# 安裝 expo
npm install -g expo-cli

# 新建項(xiàng)目
expo init

# 切換到項(xiàng)目根目錄
cd demo

開發(fā)

# 運(yùn)行 ios 程序
npm run ios

# 運(yùn)行 android 程序
npm run android

或者

# 手機(jī)上安裝 expo 客戶端

# 開啟本地 `js` UI 進(jìn)程服務(wù)（開發(fā)模式）
expo start

# 運(yùn)行 ios 程序
# 用 expo 客戶端掃描二維碼

# 運(yùn)行 android 程序
# 用 expo 客戶端掃描二維碼

打包 `apk, ipa`

# 打包 apk
expo build:android

# 打包 ipa
expo build:ios

可能遇到的問題

如果構(gòu)建出錯(cuò)，嘗試刪除項(xiàng)目根目錄下的 .expo 文件夾之后，再試
Packager is not running at ...: 嘗試重新打開一個(gè)終端，并嘗試刪除項(xiàng)目根目錄下的 .expo 文件夾之后，再試

5. 選擇合適的組件庫

react-navigation: 應(yīng)用導(dǎo)航組件
react-native-elements: UI 組件庫
NativeBase: UI 組件庫
react-native-vector-icons: 圖標(biāo)庫
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 初始化的項(xiàng)目，只是搭建好了基礎(chǔ)的骨架，項(xiàng)目的其他部分需要開發(fā)者自己去搭建，如 storybook 組件預(yù)覽、enzyme + jest 測試、eslint + prettier 代碼矯正與優(yōu)化等。

所以，選擇一個(gè)合適的、已經(jīng)搭建好大部分架子的模板就很受用了：

ignite: 內(nèi)置了 redux、redux-saga、storybook、enzyme、jest、standard
snowflake: 內(nèi)置了 redux、redux-thunk、jest、eslint
pepperoni-app-kit: 用的不多

以 ignite 舉例：

# 安裝 ignite-cli
npm install -g ignite-cli

# 初始化項(xiàng)目
ignite new demo

# 切換目錄
cd demo

# 現(xiàn)在就可以對項(xiàng)目進(jìn)行操作了，如添加 screen，運(yùn)行程序等

# 運(yùn)行 storybook 組件預(yù)覽
npm run storybook

# 開啟本地 `js` UI 進(jìn)程服務(wù)（開發(fā)模式）
npm run start

# android 打包
npm run android:build

# ios 打包需要用 Xcode

7. 開發(fā)應(yīng)用

除了 style 與 css 的區(qū)別和 js 無 DOM 外，其他與開發(fā) web 項(xiàng)目一致。

8. 應(yīng)用實(shí)例

diary 便是使用 expo 開發(fā)的一個(gè)日記 APP。

9. 后續(xù)

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

從 1 到完美，用 js 和 react-native 寫一個(gè) APP