React Navigationのリセット

プロジェクトを深くするたびにReact Navigationを使いますが、いつも斬新です.
必要な部分だけ探して実現するので、あまり頭の中に留まることはありません.
だから今回のプロジェクトは逐次漸進的に整理します.

パッケージのインストール

2022年1月18日を基準として、Navigationは以下の詳細パッケージから構成されています.

このうち/nativeが先にインストールされます.

npm install @react-navigation/native

既にインストールされている場合は、依存ライブラリをインストールする必要があります.

react-native-screens

react-native-safe-area-context

npm install react-native-screens react-native-safe-area-context

RN>=0.60のバージョンではauto-linkingなので、依存ライブラリへのリンクは必要ありません.

iOSの追加

ただし、Macを使用してiOSを開発する場合は、auto-linkingとは異なるpodを更新する必要があります.

npx pod-install ios

Androidの追加

iOSとは異なり、react-native-screensをAndroidで正常に動作させるには、追加の作業が必要です.
1.MainActivity.java修正ファイル

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(null);
}

MainActivity.javaファイル上部

に追加

import android.os.Bundle;

Androidアクティビティが再起動されると、これらの操作はビューステータスの保持と競合を阻止します.

適用

すべての初期設定が完了したら、最上位レベルappコンポーネントを<NavigationContainer></NavigationContainer>にカプセル化します.

import { NavigationContainer } from '@react-navigation/native';