在 React Native 推出後不久，我們開始每兩週發布一次版本，以協助社群採用新功能，同時保持版本穩定以供生產使用。在 Facebook，我們必須每兩週穩定程式碼庫，以發布我們的生產 iOS 應用程式，因此我們決定以相同的步調發布開放原始碼版本。現在，許多 Facebook 應用程式每週發布一次，尤其是在 Android 上。因為我們每週從 master 分支發布，所以我們需要保持其相當穩定。因此，每兩週發布一次的節奏甚至不再讓內部貢獻者受益。

我們經常聽到社群的回饋，表示發布頻率很難跟上。像 Expo 這樣的工具必須跳過每隔一個版本，才能管理版本的快速變更。因此，每兩週發布一次的版本顯然對社群沒有帶來好處。

現在每月發布​

我們很高興宣布新的每月發布節奏，以及 2016 年 12 月發布的 v0.40 版本，該版本在上個月已趨於穩定，並且可以採用。（只需確保更新 iOS 原生模組中的標頭）。

雖然可能會因避開週末或處理無法預見的問題而略有幾天的變動，但您現在可以預期特定版本會在每個月的第一天提供，並在最後一天發布。

使用當月版本以獲得最佳支援​

1 月的候選版本已準備好供您試用，您可以在此處查看新功能。

為了查看即將發生的變更並為 React Native 貢獻者提供更好的回饋，請盡可能始終使用當月的候選版本。到每個版本在月底發布時，其中包含的變更將已在生產 Facebook 應用程式中發布超過兩週。

您可以使用新的 react-native-git-upgrade 命令輕鬆升級您的應用程式

npm install -g react-native-git-upgrade
react-native-git-upgrade 0.41.0-rc.0

我們希望這種更簡單的方法將使社群更容易追蹤 React Native 中的變更，並盡可能快速地採用新版本！

（感謝 Martin Konicek 提出此計畫，並感謝 Mike Grabowski 使其實現）

升級到新版本的 React Native 一直很困難。您可能以前見過類似的情況

這些選項都不是理想的。透過覆寫檔案，我們會遺失本機變更。如果不覆寫，我們就無法獲得最新的更新。

今天，我很榮幸推出一個新工具，可協助解決此問題。該工具稱為 react-native-git-upgrade，並在幕後使用 Git 以在可能的情況下自動解決衝突。

用法​

需求：Git 必須在 PATH 中可用。您的專案不必由 Git 管理。

全域安裝 react-native-git-upgrade

$ npm install -g react-native-git-upgrade

或者，使用 Yarn

$ yarn global add react-native-git-upgrade

然後，在您的專案目錄中執行它

$ cd MyProject
$ react-native-git-upgrade 0.38.0

注意：不要執行 'npm install' 來安裝新版本的 react-native。該工具需要能夠比較舊的和新的專案範本才能正確運作。只需在您的應用程式資料夾中執行它，如上所示，同時仍使用舊版本。

範例輸出

您也可以在不帶引數的情況下執行 react-native-git-upgrade，以升級到最新版本的 React Native。

我們會盡力保留您在 Android 和 iOS 建置檔案中的變更，因此您無需在升級後執行 react-native link。

我們已將實作設計為盡可能少的侵入性。它完全基於在暫存目錄中即時建立的本機 Git 儲存庫。它不會干擾您的專案儲存庫（無論您使用什麼 VCS：Git、SVN、Mercurial... 或無）。如果發生意外錯誤，您的來源會還原。

它是如何運作的？​

關鍵步驟是產生 Git 修補程式。該修補程式包含 React Native 範本中，您的應用程式使用的版本與新版本之間的所有變更。

為了獲得此修補程式，我們需要從 node_modules 目錄中 react-native 套件中嵌入的範本產生一個應用程式（這些是與 react-native init 命令使用的範本相同的範本）。然後，在從目前版本和新版本中的範本產生原生應用程式後，Git 能夠產生適用於您的專案的修補程式（即包含您的應用程式名稱）

[...]

diff --git a/ios/MyAwesomeApp/Info.plist b/ios/MyAwesomeApp/Info.plist
index e98ebb0..2fb6a11 100644
--- a/ios/MyAwesomeApp/Info.plist
+++ b/ios/MyAwesomeApp/Info.plist
@@ -45,7 +45,7 @@
        <dict>
            <key>localhost</key>
            <dict>
-               <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+               <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
[...]

我們現在需要做的就是將此修補程式套用至您的來源檔案。雖然舊的 react-native upgrade 流程會提示您進行任何細微的差異，但 Git 能夠使用其三向合併演算法自動合併大部分變更，並最終為我們留下熟悉的衝突分隔符號

    13B07F951A680F5B00A75B9A /* Release */ = {
      isa = XCBuildConfiguration;
      buildSettings = {
        ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
        CODE_SIGN_IDENTITY = "iPhone Developer";
        FRAMEWORK_SEARCH_PATHS = (
          "$(inherited)",
          "$(PROJECT_DIR)/HockeySDK.embeddedframework",
          "$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
        );
=======
        CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
        HEADER_SEARCH_PATHS = (
          "$(inherited)",
          /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
          "$(SRCROOT)/../node_modules/react-native/React/**",
          "$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
        );

這些衝突通常很容易理解。分隔符號 ours 代表「您的團隊」，而 theirs 可以視為「React Native 團隊」。

為什麼要引入新的全域套件？​

React Native 隨附一個全域 CLI（react-native-cli 套件），它將命令委派給嵌入在 node_modules/react-native/local-cli 目錄中的本機 CLI。

如上所述，該流程必須從您目前的 React Native 版本開始。如果我們已將實作嵌入在本機 CLI 中，則在使用舊版本的 React Native 時，您將無法享受此功能。例如，如果此新的升級程式碼僅在 0.38.0 中發布，則您將無法從 0.29.2 升級到 0.38.0。

基於 Git 的升級是開發人員體驗的一大改進，並且將其提供給所有人非常重要。透過使用單獨的套件 react-native-git-upgrade 全域安裝，您可以立即使用此新程式碼，無論您的專案使用哪個版本的 React Native。

另一個原因是 Martin Konicek 最近的 Yeoman wipeout。我們不希望將這些 Yeoman 相依性重新放回 react-native 套件中，以便能夠評估舊範本以建立修補程式。

試用並提供回饋​

總之，我想說，享受此功能，並隨時建議改進、報告問題，尤其是傳送提取請求。每個環境都略有不同，每個 React Native 專案也都不盡相同，我們需要您的回饋，以使此功能對所有人都能良好運作。

謝謝您！​

我要感謝出色的公司 Zenika 和 M6 Web (已封存)，沒有他們，這一切都不可能實現！

我們從許多人那裡聽到，React Native 正在進行如此多的工作，很難追蹤正在發生的事情。為了協助溝通正在進行的工作，我們現在發布 React Native 的藍圖。在高層次上，這項工作可以分為三個優先事項

• 核心函式庫。為最有用的組件和 API 新增更多功能。
• 穩定性。改善底層基礎架構以減少錯誤並提高程式碼品質。
• 開發人員體驗。協助 React Native 開發人員更快地行動

如果您對您認為在藍圖上很有價值的功能有建議，請查看 Canny，您可以在其中建議新功能並討論現有的提案。

React Native 的新功能​

今天發布的 React Native 0.37 版 引入了一個新的核心組件，使您可以非常輕鬆地將可觸控的 Button 新增到任何應用程式。我們還引入了對新的 Yarn 套件管理員的支援，這應該可以加快更新應用程式相依性的整個過程。

介紹 Button​

今天，我們將介紹一個基本的 <Button /> 組件，它在每個平台上看起來都很棒。這解決了我們收到的最常見的回饋之一：React Native 是唯一沒有現成可用的按鈕的行動開發工具組之一。

<Button
  onPress={onPressMe}
  title="Press Me"
  accessibilityLabel="Learn more about this Simple Button"
/>

經驗豐富的 React Native 開發人員知道如何製作按鈕：在 iOS 上使用 TouchableOpacity 以獲得預設外觀，在 Android 上使用 TouchableNativeFeedback 以獲得漣漪效果，然後套用一些樣式。自訂按鈕並非特別難以建置或安裝，但我們的目標是讓 React Native 非常容易學習。透過在核心中新增一個基本按鈕，新手將能夠在第一天開發出很棒的東西，而不是花時間格式化 Button 並學習 Touchable 的細微差別。

Button 旨在在每個平台上都能良好運作並看起來像原生按鈕，因此它不會支援自訂按鈕的所有花俏功能。這是一個很好的起點，但並非旨在取代您所有現有的按鈕。若要瞭解更多資訊，請查看新的 Button 文件，其中包含可執行的範例！

使用 Yarn 加快 react-native init 的速度​

您現在可以使用 Yarn，這是一個新的 JavaScript 套件管理員，以顯著加快 react-native init 的速度。若要查看加速效果，請安裝 yarn 並將您的 react-native-cli 升級到 1.2.0

$ npm install -g react-native-cli

您現在應該在設定新應用程式時看到「使用 yarn」

在簡單的本機測試中，在良好的網路上，react-native init 在大約 1 分鐘內完成（而使用 npm 3.10.8 時約為 3 分鐘）。安裝 yarn 是可選的，但強烈建議。

謝謝您！​

我們要感謝為此版本做出貢獻的每個人。完整的發行說明現已在 GitHub 上提供。憑藉二十多個錯誤修復和新功能，React Native 由於您的貢獻而不斷變得更好。

今天，我們發布 React Native 0.36。繼續閱讀以瞭解有關新功能的更多資訊。

Headless JS​

Headless JS 是一種在應用程式在背景中執行時，在 JavaScript 中執行工作的方式。例如，它可以Used 用於同步新資料、處理推播通知或播放音樂。目前僅在 Android 上可用。

若要開始使用，請在專用檔案中定義您的非同步工作（例如 SomeTaskName.js）

module.exports = async taskData => {
  // Perform your task here.
};

接下來，在 AppRegistry 上註冊您的工作

AppRegistry.registerHeadlessTask('SomeTaskName', () =>
  require('SomeTaskName'),
);

使用 Headless JS 的確需要編寫一些原生 Java 程式碼，以便讓您在需要時啟動服務。查看我們新的Headless JS 文件以瞭解更多資訊！

Keyboard API​

使用螢幕鍵盤現在透過 Keyboard 變得更容易。您現在可以監聽原生鍵盤事件並對其做出反應。例如，若要關閉活動鍵盤，只需呼叫 Keyboard.dismiss()

import {Keyboard} from 'react-native';

// Hide that keyboard!
Keyboard.dismiss();

Animated Division​

React Native 已支援透過加法、乘法和模數組合兩個動畫值。在 0.36 版中，現在可以透過除法組合兩個動畫值。在某些情況下，動畫值需要反轉另一個動畫值以進行計算。一個範例是反轉比例（2x --> 0.5x）

const a = Animated.Value(1);
const b = Animated.divide(1, a);

Animated.spring(a, {
  toValue: 2,
}).start();

然後 b 將遵循 a 的彈簧動畫並產生 1 / a 的值。

基本用法如下

<Animated.View style={{transform: [{scale: a}]}}>
  <Animated.Image style={{transform: [{scale: b}]}} />
<Animated.View>

在此範例中，內部影像根本不會被拉伸，因為父項的縮放被抵消了。如果您想瞭解更多資訊，請查看動畫指南。

深色狀態列​

StatusBar 中新增了一個新的 barStyle 值：dark-content。透過此新增功能，您現在可以在 Android 和 iOS 上使用 barStyle。現在的行為將如下

• default：使用平台預設值（iOS 上為淺色，Android 上為深色）。
• light-content：使用帶有黑色文字和圖示的淺色狀態列。
• dark-content：使用帶有白色文字和圖示的深色狀態列。

...以及更多​

以上僅是 0.36 中已變更內容的範例。查看 GitHub 上的發行說明，以查看新功能、錯誤修復和重大變更的完整列表。

您可以透過在終端機中執行以下命令來升級到 0.36

$ npm install --save react-native@0.36
$ react-native upgrade

來自 Expo 的 Adam Miskiewicz 在 Expo 上週的辦公時間談論了行動導航和 ex-navigation React Native 函式庫。

在將應用程式發布到應用程式商店後，國際化是進一步擴大受眾範圍的下一步。全球有 20 多個國家/地區和無數人使用由右至左 (RTL) 語言。因此，讓您的應用程式支援 RTL 對他們來說是必要的。

我們很高興宣布 React Native 已得到改進，以支援 RTL 版面配置。這項功能現在在今天的 react-native master 分支中可用，並且將在下一個 RC 中提供：v0.33.0-rc。

這涉及更改 css-layout（RN 使用的核心版面配置引擎）和 RN 核心實作，以及特定的 OSS JS 組件以支援 RTL。

為了在生產環境中測試 RTL 支援，最新版本的 Facebook 廣告管理員應用程式（第一個跨平台 100% RN 應用程式）現在提供阿拉伯語和希伯來語版本，並針對 iOS 和 Android 提供 RTL 版面配置。以下是在這些 RTL 語言中的外觀

RN 中 RTL 支援的變更概述​

css-layout 已經具有用於版面配置的 start 和 end 概念。在由左至右 (LTR) 的版面配置中，start 表示 left，而 end 表示 right。但在 RTL 中，start 表示 right，而 end 表示 left。這表示我們可以讓 RN 依賴 start 和 end 計算來計算正確的版面配置，其中包括 position、padding 和 margin。

此外，css-layout 已經使每個組件的方向繼承自其父項。這表示，我們只需將根組件的方向設定為 RTL，整個應用程式就會翻轉。

下圖描述了高層次的變更

這些包括

• css-layout RTL 支援絕對定位
• 將 left 和 right 對應到 RN 核心實作中的 start 和 end，以用於陰影節點
• 並公開 橋接公用程式模組，以協助控制 RTL 版面配置

透過此更新，當您允許應用程式使用 RTL 版面配置時

• 每個組件版面配置都會水平翻轉
• 如果您正在使用支援 RTL 的 OSS 組件，則某些手勢和動畫將自動具有 RTL 版面配置
• 可能需要最少的額外工作才能使您的應用程式完全支援 RTL

使應用程式支援 RTL​

1. 若要支援 RTL，您應先將 RTL 語言套件新增至您的應用程式。

   • 請參閱 iOS 和 Android 中的一般指南。

2. 透過在原生程式碼的開頭呼叫 allowRTL() 函式，允許您的應用程式使用 RTL 版面配置。我們提供此公用程式僅在您的應用程式準備就緒時才套用 RTL 版面配置。以下是一個範例

   iOS

   // in AppDelegate.m
     [[RCTI18nUtil sharedInstance] allowRTL:YES];
   

   Android

   // in MainActivity.java
     I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
     sharedI18nUtilInstance.allowRTL(context, true);
   

3. 對於 Android，您需要在 <application> 元素中的 AndroidManifest.xml 檔案中新增 android:supportsRtl="true"。

現在，當您重新編譯應用程式並將裝置語言變更為 RTL 語言（例如阿拉伯語或希伯來語）時，您的應用程式版面配置應會自動變更為 RTL。

編寫支援 RTL 的組件​

一般而言，大多數組件都已支援 RTL，例如

• 由左至右版面配置

• 由右至左版面配置

但是，在某些情況下需要注意，您將需要 I18nManager。在 I18nManager 中，有一個常數 isRTL 用於判斷應用程式的版面配置是否為 RTL，以便您可以根據版面配置進行必要的變更。

具有方向意義的圖示​

如果您的組件具有圖示或影像，它們在 LTR 和 RTL 版面配置中將以相同的方式顯示，因為 RN 不會翻轉您的來源影像。因此，您應根據版面配置樣式翻轉它們。

• 由左至右版面配置

• 由右至左版面配置

以下是根據方向翻轉圖示的兩種方法

• 將 transform 樣式新增至影像組件

  <Image
    source={...}
    style={{transform: [{scaleX: I18nManager.isRTL ? -1 : 1}]}}
  />
  

• 或者，根據方向變更影像來源

  let imageSource = require('./back.png');
  if (I18nManager.isRTL) {
    imageSource = require('./forward.png');
  }
  return <Image source={imageSource} />;
  

手勢和動畫​

在 Android 和 iOS 開發中，當您變更為 RTL 版面配置時，手勢和動畫與 LTR 版面配置相反。目前，在 RN 中，手勢和動畫在 RN 核心程式碼層級上不受支援，但在組件層級上受支援。好消息是，其中一些組件今天已經支援 RTL，例如 SwipeableRow 和 NavigationExperimental。但是，其他具有手勢的組件將需要手動支援 RTL。

說明手勢 RTL 支援的一個很好的範例是 SwipeableRow。

手勢範例​

// SwipeableRow.js
_isSwipingExcessivelyRightFromClosedPosition(gestureState: Object): boolean {
  // ...
  const gestureStateDx = IS_RTL ? -gestureState.dx : gestureState.dx;
  return (
    this._isSwipingRightFromClosed(gestureState) &&
    gestureStateDx > RIGHT_SWIPE_THRESHOLD
  );
},

動畫範例​

// SwipeableRow.js
_animateBounceBack(duration: number): void {
  // ...
  const swipeBounceBackDistance = IS_RTL ?
    -RIGHT_SWIPE_BOUNCE_BACK_DISTANCE :
    RIGHT_SWIPE_BOUNCE_BACK_DISTANCE;
  this._animateTo(
    -swipeBounceBackDistance,
    duration,
    this._animateToClosedPositionDuringBounce,
  );
},

維護支援 RTL 的應用程式​

即使在最初發布相容於 RTL 的應用程式之後，您也可能需要迭代新功能。為了提高開發效率，I18nManager 提供了 forceRTL() 函式，用於更快地進行 RTL 測試，而無需變更測試裝置語言。您可能想在應用程式中為此提供一個簡單的開關。以下是 RNTester 中 RTL 範例中的一個範例

<RNTesterBlock title={'Quickly Test RTL Layout'}>
  <View style={styles.flexDirectionRow}>
    <Text style={styles.switchRowTextView}>forceRTL</Text>
    <View style={styles.switchRowSwitchView}>
      <Switch
        onValueChange={this._onDirectionChange}
        style={styles.rightAlignStyle}
        value={this.state.isRTL}
      />
    </View>
  </View>
</RNTesterBlock>;

_onDirectionChange = () => {
  I18nManager.forceRTL(!this.state.isRTL);
  this.setState({isRTL: !this.state.isRTL});
  Alert.alert(
    'Reload this page',
    'Please reload this page to change the UI direction! ' +
      'All examples in this app will be affected. ' +
      'Check them out to see what they look like in RTL layout.',
  );
};

在開發新功能時，您可以輕鬆切換此按鈕並重新載入應用程式以查看 RTL 版面配置。好處是您無需變更語言設定即可進行測試，但是某些文字對齊方式不會變更，如下一節所述。因此，在發布之前，最好始終以 RTL 語言測試您的應用程式。

限制和未來計畫​

RTL 支援應涵蓋應用程式中的大多數 UX；但是，目前有一些限制

• 文字對齊行為在 Android 和 iOS 中有所不同
  • 在 iOS 中，預設文字對齊方式取決於活動語言套件，它們始終在同一側。在 Android 中，預設文字對齊方式取決於文字內容的語言，即英文將靠左對齊，而阿拉伯文將靠右對齊。
  • 從理論上講，應在跨平台之間保持一致，但是當使用應用程式時，有些人可能更喜歡一種行為而不是另一種行為。可能需要進行更多使用者體驗研究，以找出文字對齊的最佳實務。

• 沒有「真正」的左/右

  如前所述，我們將 JS 端的 left/right 樣式對應到 start/end，RTL 版面配置的所有程式碼中的 left 在螢幕上都變為「right」，而程式碼中的 right 變為螢幕上的「left」。這很方便，因為您不需要過多地變更您的產品程式碼，但這表示無法在程式碼中指定「真正的左」或「真正的右」。未來，可能需要允許組件控制其方向，而與語言無關。

• 使手勢和動畫的 RTL 支援對開發人員更友善

  目前，仍然需要一些程式設計工作才能使手勢和動畫與 RTL 相容。將來，最好找到一種方法，使手勢和動畫的 RTL 支援對開發人員更友善。

試用看看！​

請查看 RNTester 中的 RTLExample 範例，以深入瞭解 RTL 支援，並告訴我們它對您來說是否運作良好！

最後，感謝您的閱讀！我們希望 React Native 的 RTL 支援能幫助您擴展應用程式的國際受眾！

上週我有機會參加在 Zynga 舊金山辦公室舉辦的 React Native Meetup。約有 200 人參加，這是一個與我附近對 React Native 感興趣的其他開發人員交流的好地方。

我特別有興趣了解更多關於 Zynga、Netflix 和 Airbnb 等公司如何使用 React 和 React Native。當晚的議程如下：

• React 中的快速原型設計
• 為 React Native 設計 API
• 彌合差距：在現有程式碼庫中使用 React Native

但首先，活動以簡短的介紹和近期新聞的簡要回顧開始

• 您知道 React Native 現在是 GitHub 上頂級的 JavaScript 儲存庫嗎？
• rnpm 現在是 React Native 核心的一部分！您現在可以使用 react-native link 代替 rnpm link 來 安裝具有原生依賴項的函式庫。
• React Native Meetup 社群正在快速成長！現在全球各地有超過 4,800 名開發人員參與各種 React Native meetup 群組。

如果其中一個 meetup 在您附近舉行，我強烈建議您參加！

Zynga 的 React 快速原型設計​

第一輪新聞之後是 Zynga 的簡短介紹，他們是當晚的主辦方。Abhishek Chadha 談到了他們如何使用 React 在行動裝置上快速原型設計新的體驗，並示範了一個類似 Draw Something 的應用程式的快速原型。他們使用了類似 React Native 的方法，透過橋接器提供對原生 API 的存取。當 Abhishek 使用裝置的相機拍攝觀眾的照片，然後在某人的頭上畫了一頂帽子時，就示範了這一點。

Netflix 的 React Native API 設計​

接下來是當晚的第一場主題演講。Netflix 的資深軟體工程師 Clarence Leung 介紹了他關於「為 React Native 設計 API」的演講。首先，他指出人們可能會開發的兩種主要函式庫類型：元件（例如標籤列和日期選擇器）和提供對原生服務（例如相機膠卷或應用程式內付款）存取的函式庫。在為 React Native 建構函式庫時，可以採用兩種方法

• 提供平台特定的元件
• 一個跨平台函式庫，為 Android 和 iOS 提供類似的 API

每種方法都有其自身的考量，這取決於您來決定哪種方法最適合您的需求。

方法 #1

作為平台特定元件的一個範例，Clarence 談到了核心 React Native 中的 DatePickerIOS 和 DatePickerAndroid。在 iOS 上，日期選擇器作為 UI 的一部分呈現，可以輕鬆嵌入現有視圖中，而 Android 上的日期選擇器則以模態方式呈現。在這種情況下，提供單獨的元件是有意義的。

方法 #2

另一方面，照片選擇器在 Android 和 iOS 上的處理方式類似。有一些細微的差異 — 例如，Android 不像 iOS 那樣將照片分組到「自拍」等資料夾中 — 但這些差異可以輕鬆地使用 if 語句和 Platform 元件來處理。

無論您選擇哪種方法，最好盡可能縮小 API 介面並建構應用程式特定的函式庫。例如，iOS 的應用程式內購買框架支援一次性、消耗性購買以及可續訂的訂閱。如果您的應用程式只需要支援消耗性購買，您可以放棄在您的跨平台函式庫中對訂閱的支援。

在 Clarence 的演講結束時，有一個簡短的問答環節。其中一個有趣的資訊是，Netflix 為這些函式庫編寫的 React Native 程式碼中，約有 80% 是在 Android 和 iOS 之間共享的。

彌合差距：在現有程式碼庫中使用 React Native​

當晚的最後一場演講是 Airbnb 的 Leland Richardson。演講的重點是在現有程式碼庫中使用 React Native。我已經知道使用 React Native 從頭開始編寫新的應用程式有多容易，所以我非常有興趣了解 Airbnb 在其現有原生應用程式中採用 React Native 的經驗。

Leland 首先談到了綠地應用程式與棕地應用程式。綠地意味著開始一個專案，而無需考慮任何先前的工作。這與棕地專案形成對比，在棕地專案中，您需要考慮現有專案的需求、開發流程以及所有團隊的各種需求。

當您在開發綠地應用程式時，React Native CLI 會為 Android 和 iOS 設定一個單一儲存庫，並且一切都能正常運作。Airbnb 使用 React Native 的第一個挑戰是 Android 和 iOS 應用程式各有自己的儲存庫。多儲存庫公司在採用 React Native 之前需要克服一些障礙。

為了繞過這個問題，Airbnb 首先為 React Native 程式碼庫設定了一個新的儲存庫。他們使用持續整合伺服器將 Android 和 iOS 儲存庫鏡像到這個新的儲存庫中。在執行測試並建置套件後，建置成品會同步回 Android 和 iOS 儲存庫。這讓行動工程師可以在不改變其開發環境的情況下開發原生程式碼。行動工程師不需要安裝 npm、執行打包器或記住建置 JavaScript 套件。編寫實際 React Native 程式碼的工程師不必擔心其程式碼在 Android 和 iOS 之間同步，因為他們直接在 React Native 儲存庫上工作。

這確實帶來了一些缺點，主要是他們無法發布原子更新。需要原生和 JavaScript 程式碼組合的變更將需要三個獨立的提取請求，所有這些請求都必須仔細地合併。為了避免衝突，如果自建置開始以來 master 已變更，CI 將無法將變更合併回 Android 和 iOS 儲存庫。這會在高提交頻率的日子（例如，當發布新版本時）造成長時間的延遲。

Airbnb 後來轉向了單一儲存庫方法。幸運的是，這已經在考慮之中，一旦 Android 和 iOS 團隊開始習慣使用 React Native，他們就很樂意加速朝單一儲存庫的方向發展。

這解決了他們在使用分離儲存庫方法時遇到的大部分問題。Leland 確實指出，這確實會對版本控制伺服器造成更大的壓力，這對於小型公司來說可能是一個問題。

導航問題​

Leland 演講的後半部分側重於一個我非常關心的主題：React Native 中的導航問題。他談到了 React Native 中大量的導航函式庫，包括第一方和第三方。NavigationExperimental 被認為是一個有前景的工具，但最終並不適合他們的使用案例。

事實上，現有的導航函式庫似乎都不太適合棕地應用程式。棕地應用程式要求導航狀態完全由原生應用程式擁有。例如，如果使用者在呈現 React Native 視圖時會話過期，則原生應用程式應該能夠接管並根據需要呈現登入畫面。

Airbnb 也希望避免在過渡期間用 JavaScript 版本替換原生導航列，因為這種效果可能會很突兀。最初，他們將自己限制在以模態方式呈現的視圖中，但當在他們的應用程式中更廣泛地採用 React Native 時，這顯然會產生問題。

他們決定需要自己的函式庫。該函式庫稱為 airbnb-navigation。該函式庫尚未開源，因為它與 Airbnb 的程式碼庫緊密相關，但他們希望在年底前發布它。

我不會詳細介紹該函式庫的 API，但以下是一些主要要點：

• 必須提前預先註冊場景
• 每個場景都顯示在自己的 RCTRootView 中。它們在每個平台上以原生方式呈現（例如，iOS 上使用 UINavigationController）。
• 場景中的主要 ScrollView 應包裝在 ScrollScene 元件中。這樣做可讓您利用原生行為，例如點擊 iOS 上的狀態列以滾動到頂部。
• 場景之間的過渡以原生方式處理，無需擔心效能。
• 自動支援 Android 返回按鈕。
• 他們可以透過 Navigator.Config 無 UI 元件來利用基於視圖控制器的導航列樣式。

還有一些注意事項需要牢記：

• 導航列不易在 JavaScript 中自訂，因為它是原生元件。這是故意的，因為使用原生導航列是此類函式庫的硬性要求。
• 每當 ScreenProps 透過橋接器傳送時，都必須序列化/反序列化，因此如果在此處傳送過多資料，則必須小心。
• 導航狀態由原生應用程式擁有（也是函式庫的硬性要求），因此 Redux 等工具無法操縱導航狀態。

Leland 的演講之後也進行了問答環節。總體而言，Airbnb 對 React Native 感到滿意。他們有興趣使用 Code Push 來修復任何問題，而無需通過 App Store，他們的工程師喜歡 Live Reload，因為他們不必在每次小變更後都等待原生應用程式重新建置。

閉幕詞​

活動在一些額外的 React Native 新聞中結束：

• Deco 宣布了他們的 React Native Showcase，並邀請所有人將他們的應用程式添加到列表中。
• 最近的 文件改版 獲得了讚譽！
• Deco IDE 的創作者之一 Devin Abbott 將教授一個入門級的 React Native 課程。

Meetup 提供了一個與社群中其他開發人員會面和學習的好機會。我期待在未來參加更多的 React Native meetup。如果您參加了這些 meetup，請留意我，並告訴我我們如何才能讓 React Native 更適合您！

擁有優質開發人員體驗的一部分是擁有優質的文件。創建好的文件需要付出很多努力 - 理想的文件應該簡潔、有幫助、準確、完整且令人愉悅。最近，我們一直在努力根據您的回饋改進文件，並且我們想分享我們所做的一些改進。

內嵌範例​

當您學習一個新的函式庫、一種新的程式語言或一個新的框架時，當您第一次編寫一些程式碼、試用它、看看它是否有效時，總會有一個美好的時刻......而且它確實有效。您創造了一些真實的東西。我們想將這種發自內心的體驗直接放入我們的文件中。像這樣

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class ScratchPad extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <Text style={{fontSize: 30, flex: 1, textAlign: 'center'}}>
          Isn't this cool?
        </Text>
        <Text style={{fontSize: 100, flex: 1, textAlign: 'center'}}>
          👍
        </Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('ScratchPad', () => ScratchPad);

我們認為這些內嵌範例，使用 react-native-web-player 模組並在 Devin Abbott 的幫助下，是學習 React Native 基礎知識的好方法，並且我們已更新了我們的 React Native 開發人員新手教學，盡可能地使用這些範例。查看一下 - 如果您曾經好奇修改一小段範例程式碼會發生什麼，這是一種非常好的探索方式。此外，如果您正在建置開發人員工具，並且想要在您自己的網站上顯示即時 React Native 範例，react-native-web-player 可以讓這變得簡單。

核心模擬引擎由 Nicolas Gallagher 的 react-native-web 專案提供，該專案提供了一種在網路上顯示 React Native 元件（如 Text 和 View）的方式。如果您有興趣建置共享大量程式碼庫的行動和網路體驗，請查看 react-native-web。

更好的指南​

在 React Native 的某些部分，有多種方法可以做事，我們聽到了回饋，我們可以提供更好的指導。

我們有一個新的 導航指南，比較了不同的方法，並建議您應該使用什麼 - Navigator、NavigatorIOS、NavigationExperimental。在中期，我們正在努力改進和整合這些介面。在短期內，我們希望更好的指南能讓您的生活更輕鬆。

我們還有一個新的 觸控處理指南，解釋了製作類似按鈕的介面的一些基礎知識，以及處理觸控事件的不同方法的簡要摘要。

我們工作的另一個領域是 Flexbox。這包括關於如何使用 Flexbox 處理佈局 以及如何控制 元件大小 的教學課程。它還包括一個不性感但希望有用的 控制 React Native 中佈局的所有屬性列表。

開始使用​

當您開始在您的機器上設定 React Native 開發環境時，您確實需要執行一堆安裝和設定操作。很難讓安裝成為真正有趣和令人興奮的體驗，但我們至少可以使其盡可能快速且輕鬆。

我們建置了一個 新的開始使用工作流程，讓您可以預先選擇您的開發作業系統和您的行動作業系統，以提供一個簡潔的地方，其中包含所有設定說明。我們還完成了安裝過程，以確保一切正常運作，並確保每個決策點都有明確的建議。在我們的無辜同事身上測試過後，我們非常確定這是一個改進。

我們還致力於 將 React Native 整合到現有應用程式中的指南。許多使用 React Native 的最大型應用程式（例如 Facebook 應用程式本身）實際上是在 React Native 中建置應用程式的一部分，而另一部分則使用常規開發工具建置。我們希望本指南能讓更多人更容易以這種方式建置應用程式。

我們需要您的幫助​

您的回饋讓我們知道我們應該優先處理什麼。我知道有些人會閱讀這篇部落格文章，並認為「更好的文件？切！X 的文件仍然是垃圾！」。這很好 - 我們需要這種動力。給予我們回饋的最佳方式取決於回饋的類型。

如果您在文件中發現錯誤，例如不準確的描述或實際上無法運作的程式碼，請提交 issue。使用「Documentation」標籤標記它，以便更容易將其路由到正確的人員。

如果沒有特定的錯誤，但文件中的某些內容從根本上令人困惑，則它不太適合 GitHub issue。相反，請在 Canny 上發布關於文件中可能需要幫助的區域。這有助於我們在進行更一般的工作（如指南編寫）時確定優先順序。

感謝您閱讀到這裡，並感謝您使用 React Native！

自我們開源 React Native 以來已經一年了。最初只有少數工程師的想法，現在已成為 Facebook 內外產品團隊使用的框架。今天在 F8 上，我們宣布 Microsoft 正在將 React Native 帶入 Windows 生態系統，讓開發人員有可能在 Windows PC、手機和 Xbox 上建置 React Native。它還將提供開源工具和服務，例如 Visual Studio Code 的 React Native 擴充功能和 CodePush，以幫助開發人員在 Windows 平台上創建 React Native 應用程式。此外，Samsung 正在為其混合平台建置 React Native，這將使開發人員能夠為數百萬台智慧型電視以及行動和穿戴式裝置建置應用程式。我們還發布了 React Native 版 Facebook SDK，這使開發人員可以更輕鬆地將 Facebook 社群功能（如登入、分享、應用程式分析和 Graph API）整合到他們的應用程式中。在一年內，React Native 改變了開發人員在每個主要平台上建置應用程式的方式。

這是一段史詩般的旅程 — 但我們才剛剛開始。以下回顧一下 React Native 自一年前開源以來是如何成長和發展的、我們在此過程中面臨的一些挑戰，以及我們對未來的期望。

這是一個摘錄。在 Facebook Code 上閱讀文章的其餘部分。

React Native 允許您使用 React 和 Relay 的宣告式程式設計模型在 JavaScript 中建置 Android 和 iOS 應用程式。這會產生更簡潔、更易於理解的程式碼；無需編譯週期即可快速迭代；以及在多個平台之間輕鬆共享程式碼。您可以更快地交付，並專注於真正重要的細節，使您的應用程式看起來和感覺都很棒。最佳化效能是其中的重要組成部分。以下是我們如何使 React Native 應用程式啟動速度提高兩倍的故事。

為什麼要趕時間？​

使用執行速度更快的應用程式，內容載入速度很快，這意味著人們有更多時間與其互動，流暢的動畫使應用程式使用起來令人愉快。在新興市場，2011 年級別的手機在 2G 網路上佔大多數，對效能的關注可以決定應用程式是可用還是不可用。

自從在 iOS 和 Android 上發布 React Native 以來，我們一直在改進列表視圖滾動效能、記憶體效率、UI 響應速度和應用程式啟動時間。啟動設定了應用程式的第一印象，並強調了框架的所有部分，因此它是最值得和最具挑戰性的問題。

這是一個摘錄。在 Facebook Code 上閱讀文章的其餘部分。