本文へスキップ

RootTag

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

RootTagを使用するケース​

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

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

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

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

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

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

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

RootTagContextを使用したRootTagへのアクセス方法。

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に依存している場合は、こちらにあるバージョン変更ログを監視してください。