摘要：從到完美，用和寫(xiě)一個(gè)在年開(kāi)源了后，緊接著在年就又開(kāi)源了，就此打開(kāi)了用和前端技術(shù)寫(xiě)原生之路。對(duì)應(yīng)來(lái)看，程序只有兩個(gè)部分，和，而部分則分為組件和。所以，在端的純庫(kù)無(wú)在中同樣適用，如等。應(yīng)用實(shí)例便是使用開(kāi)發(fā)的一個(gè)日記。

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

另外，除了 react 在做寫(xiě)原生 APP 的嘗試之外，vue 也在嘗試，詳見(jiàn) vue-native。

開(kāi)發(fā)時(shí)建議用 mac，因?yàn)?mac 上的 ios 模擬器能在開(kāi)發(fā)時(shí)，快速的重載應(yīng)用，而 android 就慢很多了

開(kāi)發(fā)時(shí)建議用 yarn, 如果非要用 npm, 務(wù)必使用 npm < 5 版本，否則就可能遇到以下的問(wèn)題（找不到 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 內(nèi)啟動(dòng)并維護(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ù)寫(xiě)原生 APP 的功能。

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

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

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

沒(méi)有 class, id 等之類的 css 選擇器

沒(méi)有 px, em 等之類的 css 尺寸單位

屬性名使用 HTML DOM Style 對(duì)象 的語(yǔ)法

使用樣式時(shí)只有類似于 css 的行內(nèi)樣式這樣的寫(xiě)法

比如：

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";

export default class LotsOfStyles extends Component {
  render() {
    return (
      
        just red
        just bigblue
        bigblue, then red
        red, then bigblue
      
    );
  }
}

const styles = StyleSheet.create({
  bigblue: {
    color: "blue",
    fontWeight: "bold",
    fontSize: 30,
  },
  red: {
    color: "red",
  },
});

詳見(jiàn) Style, StyleSheet, View Style Props, Text Style Props, Image Style Props

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

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

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

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

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

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

性能不及原生的 APP

自由度也不及原來(lái)的 APP，因?yàn)楸患s束的 react-native 模式中

apk, ipa 文件變大了

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

開(kāi)發(fā)簡(jiǎn)單、快速，入門(mén)坎比較低

跨平臺(tái)，一套代碼就可以在多個(gè)平臺(tái)上運(yùn)行

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

如果追求完美性能和體驗(yàn)的 APP，用原生的方式（androi: java, kotlin, ios: objective-c, swift）開(kāi)發(fā)

對(duì)性能和體驗(yàn)不敏感，但對(duì)人力成本敏感，并且需要快速開(kāi)發(fā)的，用 react-native 開(kāi)發(fā)

兩者可以混合開(kāi)發(fā)，對(duì)性能和體驗(yàn)敏感的用原生的方式開(kāi)發(fā)，對(duì)人力成本和時(shí)間成本敏感的用 react-native 開(kāi)發(fā)

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

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

使用 expo 方式開(kāi)發(fā)

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

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

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

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

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

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

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

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

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

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

這種方式的好處是不需要 Android Studio 或 Xcode（包括開(kāi)發(fā)和打包），對(duì)環(huán)境的要求低，配置簡(jiǎn)單，入門(mén)坎低，但不能進(jìn)行原生開(kāi)發(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

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

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

或者

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

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

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

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

# 打包 apk
expo build:android

# 打包 ipa
expo build:ios

如果構(gòu)建出錯(cuò)，嘗試刪除項(xiàng)目根目錄下的 .expo 文件夾之后，再試

Packager is not running at ...: 嘗試重新打開(kāi)一個(gè)終端，并嘗試刪除項(xiàng)目根目錄下的 .expo 文件夾之后，再試

react-navigation: 應(yīng)用導(dǎo)航組件

react-native-elements: UI 組件庫(kù)

NativeBase: UI 組件庫(kù)

react-native-vector-icons: 圖標(biāo)庫(kù)

react-native-swiper: swiper 組件

lottie-react-native: airbnb lottie 組件

react-native-animatable: 動(dòng)畫(huà)組件

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

使用 react-native init 或 create-react-native-app 初始化的項(xiàng)目，只是搭建好了基礎(chǔ)的骨架，項(xiàng)目的其他部分需要開(kāi)發(fā)者自己去搭建，如 storybook 組件預(yù)覽、enzyme + jest 測(cè)試、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)在就可以對(duì)項(xiàng)目進(jìn)行操作了，如添加 screen，運(yùn)行程序等

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

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

# android 打包
npm run android:build

# ios 打包需要用 Xcode

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

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

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

作者：深予之 (@senntyou)

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