メインコンテンツへスキップ

RootTag

RootTag は、React Native のサーフェス（つまり、Android の場合は ReactRootView または RCTRootView インスタンス、iOS の場合は RCTRootView インスタンス）のネイティブなルートビューに割り当てられる不透明な識別子です。要するに、サーフェス識別子です。

RootTag を使うべきとき​

ほとんどの React Native 開発者にとって、RootTag を扱う必要はないでしょう。

RootTag は、アプリが複数の React Native ルートビューをレンダリングし、サーフェスに応じてネイティブ API 呼び出しを異なる方法で処理する必要がある場合に役立ちます。この例としては、アプリがネイティブナビゲーションを使用しており、各画面が個別の React Native ルートビューである場合が挙げられます。

ネイティブナビゲーションでは、すべての React Native ルートビューはプラットフォームのナビゲーションビュー（例：Android の Activity、iOS の UINavigationViewController）でレンダリングされます。これにより、ネイティブなルック＆フィールやナビゲーション遷移など、プラットフォームのナビゲーションパラダイムを活用できます。ネイティブナビゲーション API と連携する機能は、ネイティブモジュールを介して React Native に公開できます。

たとえば、画面のタイトルバーを更新するには、ナビゲーションモジュールの API setTitle("Updated Title") を呼び出しますが、更新するスタック内のどの画面であるかを知る必要があります。ここで、ルートビューとそのホスティングコンテナを識別するために RootTag が必要になります。

RootTag のもう 1 つのユースケースは、アプリが特定の JavaScript 呼び出しを、その呼び出し元のルートビューに基づいてネイティブに帰属させる必要がある場合です。異なるサーフェスからの呼び出し元を区別するために RootTag が必要になります。

RootTag へのアクセス方法（必要な場合）​

バージョン 0.65 以前では、RootTag はレガシーコンテキストを介してアクセスされていました。React 18 以降で導入される Concurrent 機能に React Native を対応させるため、0.66 では RootTagContext を介して最新のContext API に移行しています。バージョン 0.65 は、開発者がコールサイトを移行する時間を与えるために、レガシーコンテキストと推奨される RootTagContext の両方をサポートしています。破壊的変更の概要を参照してください。

RootTagContext を介して RootTag にアクセスする方法。

js
import {RootTagContext} from 'react-native';
import NativeAnalytics from 'native-analytics';
import NativeNavigation from 'native-navigation';

function ScreenA() {
  const rootTag = useContext(RootTagContext);

  const updateTitle = title => {
    NativeNavigation.setTitle(rootTag, title);
  };

  const handleOneEvent = () => {
    NativeAnalytics.logEvent(rootTag, 'one_event');
  };

  // ...
}

class ScreenB extends React.Component {
  static contextType: typeof RootTagContext = RootTagContext;

  updateTitle(title) {
    NativeNavigation.setTitle(this.context, title);
  }

  handleOneEvent() {
    NativeAnalytics.logEvent(this.context, 'one_event');
  }

  // ...
}

React ドキュメントで、クラスとフックの Context API について詳しく学びましょう。

0.65 での破壊的変更​

RootTagContext は以前は unstable_RootTagContext という名前でしたが、0.65 で RootTagContext に変更されました。コードベース内の unstable_RootTagContext の使用箇所を更新してください。

0.66 での破壊的変更​

RootTag へのレガシーコンテキストアクセスは削除され、RootTagContext に置き換えられます。0.65 以降、開発者には RootTag アクセスを積極的に RootTagContext に移行することを推奨します。

今後の計画​

新しい React Native アーキテクチャの進展に伴い、RootTag は将来的に改良される予定ですが、RootTag の型は不透明に保ち、React Native コードベースでの混乱を防ぐ意図です。RootTag が現在数値にエイリアスされているという事実に依存しないでください！アプリが RootTag に依存している場合は、こちらで確認できるバージョン変更履歴に注意してください。