Facebook Open Source React Native

升級到新的 React Native 版本

升級到新版本的 React Native 將使您可以訪問更多 API，視圖，開發人員工具和其他好東西。升級需要花費很少的精力，但我們會盡量讓您輕鬆完成。根據您是使用 create-react-native-app 還是 react-native init 來創建項目，說明略有不同。

創建React Native App項目

將Create React Native App項目升級到新版本的React Native需要更新package.json文件中的react-native，react和expo軟件包版本。請參閱此文檔以了解支持的版本。您還需要在app.json文件中設置正確的sdkVersion。

有關升級項目的最新信息，請參閱 CRNA user guide

使用本機代碼構建的項目

基於Git升級

react-native-git-upgrade 模塊提供了一步操作來升級源文件，並且衝突最少。在引擎蓋下，它分為兩個階段：

首先，它計算舊模板文件和新模板文件之間的Git補丁
然後，補丁應用於用戶的源。

重要信息：您不必安裝新版本的react-native軟件包，它將自動安裝。

1. 安裝 Git

雖然您的項目不必由Git版本控制系統處理 - 您可以使用 Mercurial，SVN或什麼都沒有 - 您仍然需要在系統上安裝Git才能使用 react-native-git-upgrade。 Git 也需要在PATH 中提供。

2. .安裝 `react-native-git-upgrade` 模組

react-native-git-upgrade 模塊提供CLI，必須全局安裝：

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

3.運行命令

運行以下命令開始升級到最新版本的過程：

$ react-native-git-upgrade

您可以通過傳遞參數來指定React Native版本：react-native-git-upgrade X.Y.Z

模板以優化的方式升級。您仍然可能會遇到衝突，但僅限於Git 3路合併失敗的地方，具體取決於版本以及您修改源的方式。

4. 解決衝突

衝突的文件包括分隔符，這些分隔符非常清楚變更的來源。例如：

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/**",
    );

您可以將“我們的”視為“您的團隊”，將“他們的”視為“React Native dev團隊”。

替代

僅在以上情況不起作用的情況下使用此選項。

1. 升級 react-native 依賴項

請注意最新版本的react-native npm軟件包（或使用npm info react-native來檢查）。

現在使用 npm install --save 在您的項目中安裝該版本的 react-native：

$ npm install --save react-native@X.Y
# where X.Y is the semantic version you are upgrading to
npm WARN peerDependencies The peer dependency react@~R included from react-native...

如果您看到有關peerDependency的警告，也可以通過運行升級來做出反應：

$ npm install --save react@R
# where R is the new version of react from the peerDependency warning you saw

2. 升級項目模板

新的npm包可能包含對運行react-native init時通常生成的文件的更新，如iOS和Android子項目。

您可以查閱rn-diff以查看項目模板文件是否有更改。如果沒有，只需重建項目並繼續開發。如果發生細微更改，您可以手動更新項目並重建。

如果有重大更改，請在終端中運行以獲取以下內容：

$ react-native upgrade

這將根據最新模板檢查您的文件並執行以下操作：

如果模板中有新文件，則只需創建它。
如果模板中的文件與您的文件相同，則會跳過該文件。
I如果項目中的文件與模板不同，則會提示您; 您可以選擇保留文件或使用模板版本覆蓋它。

手動升級

某些升級需要手動步驟，例如 0.13至0.14，或0.28至0.29。請務必在升級時檢查發行說明，以便確定特定項目可能需要的任何手動更改。

No 意見

Facebook Open Source React Native

在設備上運行

在將應用程序發布給用戶之前，最好先在實際設備上測試您的應用程序。本文檔將指導您完成在設備上運行React Native應用程序並準備好進行生產的必要步驟。

如果您使用Create React Native App設置項目，則可以使用Expo應用程序掃描QR代碼，在設備上預覽應用程序。要在設備上構建和運行應用程序，您需要從“入門指南”中彈出並安裝本機代碼依賴項。

Android 為例

在Android設備上運行您的應用

開發系統: 以 window 為例

1. 啟用USB調試

默認情況下，大多數Android設備只能安裝和運行從Google Play下載的應用。您需要在設備上啟用USB調試才能在開發期間安裝應用程序。

要在設備上啟用USB調試，首先需要啟用“開發人員選項”菜單，方法是轉到設置→關於手機，然後點擊底部的內部版本號行七次。然後，您可以返回設置→開發人員選項以啟用“USB調試”。

2. 通過USB插入設備

現在讓我們設置一個Android設備來運行我們的React Native項目。繼續，通過USB將設備插入開發機器。

現在通過運行adb設備檢查您的設備是否正確連接到ADB，即Android Debug Bridge。

$ adb devices
List of devices attached
emulator-5554 offline   # Google emulator
14ed2fcc device         # Physical device

在右列中查看設備表示設備已連接。您一次只能連接一台設備。

3. 運行你的應用程序

在命令提示符下鍵入以下內容以在設備上安裝和啟動應用程序：

$ react-native run-android

如果出現“網橋配置不可用”錯誤，請參閱 Using adb reverse.

提示

您還可以使用React Native CLI生成並運行Release版本 (e.g. react-native run-android --variant=release).

連接到開發服務器

您還可以通過連接到開發計算機上運行的開發服務器在設備上快速迭代。有多種方法可以實現此目的，具體取決於您是否可以使用USB電纜或Wi-Fi網絡。

方法1：使用adb reverse（推薦）

如果您的設備運行Android 5.0（Lollipop）或更新版本，它可以使用此方法，它已啟用USB調試，並通過USB連接到您的開發機器。

在命令提示符中運行以下命令：

$ adb reverse tcp:8081 tcp:8081

您現在可以從“開發人員”菜單啟用實時重新加載。只要您的JavaScript代碼發生變化，您的應用就會重新加載。

方法2：通過Wi-Fi連接

您還可以通過Wi-Fi連接到開發服務器。您首先需要使用USB電纜在設備上安裝應用程序，但一旦完成，您可以按照這些說明進行無線調試。在繼續之前，您需要開發機器的當前IP地址。

打開命令提示符並鍵入 ipconfig 以查找計算機的IP地址 (more info).

確保您的筆記本電腦和手機位於同一Wi-Fi網絡上。
在您的設備上打開您的React Native應用程序。
你會看到一個錯誤的紅色屏幕。還行吧。以下步驟將解決這個問題。
打開應用內開發者菜單。
轉到開發設置→調試服務器主機以獲取設備。
鍵入計算機的IP地址和本地開發服務器的端口（例如10.0.1.1:8081）。
返回Developer菜單並選擇Reload JS。

您現在可以從“開發人員”菜單啟用實時重新加載。只要您的JavaScript代碼發生變化，您的應用就會重新加載。

構建應用程序以進行生產

您已經使用React Native構建了一個出色的應用程序，現在您想要在Play商店中發布它。該過程與任何其他原生Android應用程序相同，需要考慮一些其他注意事項。按照指南生成已簽名的APK以了解更多信息。

No 意見

Facebook Open Source React Native

為 Apple TV 構建

已經實現了電視設備支持，目的是使現有的React Native應用程序在Apple TV和Android TV上“正常工作”，而應用程序的JavaScript代碼中幾乎不需要進行任何更改。

Android 為例

建立變化

本機層：要在Android TV上運行 React Native 項目，請確保對 AndroidManifest.xml 進行以下更改

  <!-- Add custom banner image to display as Android TV launcher icon -->
 <application
  ...
  android:banner="@drawable/tv_banner"
  >
    ...
    <intent-filter>
      ...
      <!-- Needed to properly create a launch intent when running on Android TV -->
      <category android:name="android.intent.category.LEANBACK_LAUNCHER"/>
    </intent-filter>
    ...
  </application>

JavaScript層：Platform.android.js中添加了對Android TV的支持。您可以通過執行操作檢查代碼是否在Android TV上運行

var Platform = require('Platform');
var running_on_android_tv = Platform.isTV;

代碼更改

訪問可觸摸控件：在Android TV上運行時，Android框架將根據視圖中可聚焦元素的相對位置自動應用方嚮導航方案。 Touchable mixin添加了代碼來檢測焦點變化，並使用現有方法正確設置組件樣式，並在使用電視遙控器選擇視圖時啟動正確的操作，因此TouchableHighlight，TouchableOpacity和TouchableNativeFeedback將“正常工作”。尤其是：
- touchableHandleActivePressIn 將在可觸摸視圖進入焦點時執行
- touchableHandleActivePressOut 當可觸摸視圖失焦時
- touchableHandlePress 當通過按電視遙控器上的“選擇”按鈕實際選擇可觸摸視圖時

電視遙控器/鍵盤輸入：一個新的本機類ReactAndroidTVRootViewHelper，為電視遙控事件設置關鍵事件處理程序。當電視遠程事件發生時，此類將觸發JS事件。此事件將由TVEventHandler JavaScript對象的實例選取。需要實現TV遠程事件的自定義處理的應用程序代碼可以創建TVEventHandler的實例並監聽這些事件，如以下代碼所示：

var TVEventHandler = require('TVEventHandler');

class Game2048 extends React.Component {
  _tvEventHandler: any;

  _enableTVEventHandler() {
    this._tvEventHandler = new TVEventHandler();
    this._tvEventHandler.enable(this, function(cmp, evt) {
      if (evt && evt.eventType === 'right') {
        cmp.setState({board: cmp.state.board.move(2)});
      } else if(evt && evt.eventType === 'up') {
        cmp.setState({board: cmp.state.board.move(1)});
      } else if(evt && evt.eventType === 'left') {
        cmp.setState({board: cmp.state.board.move(0)});
      } else if(evt && evt.eventType === 'down') {
        cmp.setState({board: cmp.state.board.move(3)});
      } else if(evt && evt.eventType === 'playPause') {
        cmp.restartGame();
      }
    });
  }

  _disableTVEventHandler() {
    if (this._tvEventHandler) {
      this._tvEventHandler.disable();
      delete this._tvEventHandler;
    }
  }

  componentDidMount() {
    this._enableTVEventHandler();
  }

  componentWillUnmount() {
    this._disableTVEventHandler();
  }

開發選單支持: 在模擬器上，cmd-M將調出開發人員菜單，就像在Android上一樣。要在真正的Android TV設備上播放，請長按遙控器上的播放/暫停按鈕。（請不要搖動Android TV設備，這將無法正常工作:)）

已知的問題：

InputText 組件暫時不起作用（即它們無法獲得焦點）。

No 意見

A-Fu Design

升級到新的 React Native 版本

創建React Native App項目

使用本機代碼構建的項目

僅包含本機代碼的項目

基於Git升級

1. 安裝 Git

2. .安裝 `react-native-git-upgrade` 模組

3.運行命令

4. 解決衝突

替代

1. 升級 react-native 依賴項

2. 升級項目模板

手動升級

在設備上運行

1. 啟用USB調試

2. 通過USB插入設備

3. 運行你的應用程序

連接到開發服務器

方法1：使用adb reverse（推薦）

方法2：通過Wi-Fi連接

構建應用程序以進行生產

為 Apple TV 構建

代碼更改

About me

Follow Us

Categories

Recent Posts

Sponsor

Facebook

Blog Archive

A-Fu Design

創建React Native App項目

使用本機代碼構建的項目

僅包含本機代碼的項目

基於Git升級

1. 安裝 Git

2. .安裝 react-native-git-upgrade 模組

3.運行命令

4. 解決衝突

替代

1. 升級 react-native 依賴項

2. 升級項目模板

手動升級

1. 啟用USB調試

2. 通過USB插入設備

3. 運行你的應用程序

連接到開發服務器

方法1：使用adb reverse（推薦）

方法2：通過Wi-Fi連接

構建應用程序以進行生產

代碼更改

About me

Follow Us

Categories

Recent Posts

Sponsor

Facebook

Blog Archive

2. .安裝 `react-native-git-upgrade` 模組