摘要：從到完美，用和寫一個在年開源了后，緊接著在年就又開源了，就此打開了用和前端技術寫原生之路。對應來看，程序只有兩個部分，和，而部分則分為組件和。所以，在端的純庫無在中同樣適用，如等。應用實例便是使用開發的一個日記。

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 (
      
        just red
        just bigblue
        bigblue, then red
        red, then bigblue
      
    );
  }
}

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 打包方式進行

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 項目一致。

diary 便是使用 expo 開發的一個日記 APP。

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

作者：深予之 (@senntyou)

版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）