React ナビゲーションを使用してネイティブナビゲーションを React に完全ガイド

npm install @react-navigation/bottom-tabs
npm install @react-navigation/drawer

コアコンセプト

React のナビゲーションは 3 つの主要なビルディング ブロックの周りに構築されます。

• []ナビゲートコンテナ[ - ナビゲーションツリーと状態を管理する最外側のラッパー。
• []ナビゲーター] – ナビゲーションパターン(スタック、タブ、ドローダ)を定義するコンポーネント。
• []画面[] - アプリ内のビューやページを表す個々のコンポーネント。

ナビゲーション設定は、[]にラップする必要があります。このコンテナは、通常、アプリコンポーネントのルートに配置されます。

Stack Navigatorの設定

スタックナビゲーターは、画面の先頭のスタックを管理します。 ネイティブプラットフォームの移行アニメーションとデフォルトでジェスチャーを使用します。

まず、必要なモジュールをインポートします。

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

スタックナビゲーターインスタンスを作成します。

const Stack = createNativeStackNavigator();

App コンポーネント内の navigator を定義します。

function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} />
 <Stack.Screen name="Details" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

各[は]のプロップ(ナビゲーションに使用されます)と[のプロップ(Reactコンポーネントをレンダーする)が必要です。

スクリーンの作成とナビゲート

スクリーンは標準の React コンポーネントです。それらは 2 つの重要な props: と を受け取ります。 オブジェクトは、画面間で移動する方法を提供します。 以下は、典型的なホーム画面です。

function HomeScreen({ navigation }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Home Screen</Text>
 <Button
 title="Go to Details"
 onPress={() => navigation.navigate('Details')}
 />
 </View>
 );
}

詳細画面は、ナビゲーションのプロップを使用する必要はありません。

function DetailsScreen({ route }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Details Screen</Text>
 </View>
 );
}

ナビゲーション方法

React のナビゲーションは ] プロパティで複数のメソッドを提供しています。

• [navigate(名前、params)[[ - 画面に移動し、スタックに存在する場合、既存のインスタンスを再使用します。
• [push(名前、params)[[ - 常にスタックに新しい画面をプッシュします。同じ画面がすでにスタックに存在する場合でも、。
• [goBack()]] - スタック内の前の画面に移動します。
• [置換(名前、パラメータ)[ - 新規画面を新しい画面に置き換え、履歴から現在の状態を削除します。
• reset(state)] - 指定された状態オブジェクトにナビゲーション状態全体をリセットします。

例えば、詳細画面の新規インスタンスをプッシュし、パラメータを渡します。

navigation.push('Details', { itemId: 42, otherParam: 'anything' });

スクリーン間の変数を渡すこと

または ] の 2 番目の引数で画面にデータを渡すことができます。受信画面は ] を介してそれらのパラメータにアクセスします。

// In HomeScreen
navigation.navigate('Details', { userId: 123 });

// In DetailsScreen
function DetailsScreen({ route }) {
 const { userId } = route.params;
 return <Text>User ID: {userId}</Text>;
}

デフォルトパラメータ値を設定して、画面コンポーネントのを使用します。

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 initialParams={{ itemId: 0 }}
/>

ナビゲーションオプションの設定

各画面は、ヘッダー、タブアイコン、引き出しラベルなどをカスタマイズできます。[のプロップ、または]) ナビゲーターのプロップ。

ヘッダーのカスタム化

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 options={{
 title: 'Details',
 headerStyle: { backgroundColor: '#f4511e' },
 headerTintColor: '#fff',
 headerTitleStyle: { fontWeight: 'bold' },
 }}
/>

を受信する関数を使用して動的オプションを設定できます。

options={({ route }) => ({ title: route.params.name })}

タブナビゲーター

タブナビゲーションは、トップレベルのアプリセクションで共通です。 下部タブナビゲーターをインストールします。

npm install @react-navigation/bottom-tabs

タブのナビゲーターを作成し、スタックと組み合わせます。

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function HomeTabs() {
 return (
 <Tab.Navigator>
 <Tab.Screen name="Feed" component={FeedScreen} />
 <Tab.Screen name="Profile" component={ProfileScreen} />
 </Tab.Navigator>
 );
}

スタックナビゲーターやその逆にタブナビゲーターをネストできます。[]を使ってタブアイコンをカスタマイズします。]でプロップします。

ドローワーナビゲーター

引き出しのナビゲーターは、左から引き出しをスライドさせ、ナビゲーション項目を明らかにします。インストールします。

npm install @react-navigation/drawer

設定例:

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function AppDrawer() {
 return (
 <Drawer.Navigator>
 <Drawer.Screen name="Home" component={HomeScreen} />
 <Drawer.Screen name="Settings" component={SettingsScreen} />
 </Drawer.Navigator>
 );
}

を使用して、プログラム的に描画者を開き、閉じます。

ネスト・ナビゲーター

複雑なアプリは、しばしばネストナビゲーター(例えば、スタックナビゲーター内のタブナビゲーター)をネストします。 Reactナビゲーションは、ネストをうまく処理します。 ] どのスクリーンに提供されたプロップは、必要に応じて、親ナビゲーターのメソッドを呼び出すことができます。 ]を使用して、親のナビゲーターのメソッドにアクセスします。

例:タブナビゲーターと設定画面を含むスタック:

function RootStack() {
 return (
 <Stack.Navigator>
 <Stack.Screen name="Main" component={MainTabs} options={{ headerShown: false }} />
 <Stack.Screen name="Settings" component={SettingsScreen} />
 </Stack.Navigator>
 );
}

リンク集とディープリンク

React ナビゲーションは、特定の画面を開く URL を処理するためのディープリンクをサポートしています。 [ の prop を に設定します。

const linking = {
 prefixes: ['myapp://', 'https://myapp.com'],
 config: {
 screens: {
 Home: 'home',
 Details: 'details/:itemId',
 },
 },
};

<NavigationContainer linking={linking}>
 {/* navigators */}
</NavigationContainer>

それから、着信URLを処理します。これにより、特定の画面にリンクするプッシュ通知などの機能が有効になります。

認証フロー

多くのアプリは認証状態に基づいて条件付きナビゲーションが必要です。 一般的なパターンは、ルートレベルでナビゲーターを切り替えることです。

function App() {
 const [isSignedIn, setIsSignedIn] = useState(false);

 return (
 <NavigationContainer>
 {isSignedIn ? <AppNavigator /> : <AuthNavigator />}
 </NavigationContainer>
 );
}

あるいは、条件付き画面で単一のスタックを使用します。 約束や状態を最新の状態に保つことによって、フリッカーを避けてください。

パフォーマンスとベストプラクティス

• より優れた性能とネイティブな移行のために、[[]]] のネイティブスタックナビゲーター[ () を使用します。
• 一度にマウントされた画面数を最小限に抑えます。 スタックナビゲーターのデフォルトでReact Navigation unmounts隠し画面が、タブナビゲーターの場合は、レイジーローディングを設定できます。
• シリアライズの問題を回避するためにパラメータを介してのみプリミティブデータを渡す。
• 頻繁に再レンダーするスクリーンコンポーネントの [ または [ を使用します。
• ナビゲーション遷移時の重度の計算を避け、[]でオフロード作業をします。
• 変更の未解決のプロンプトのイベントを常に処理します。

コンテンツ

React Navigation は、React Native アプリでナビゲーションを管理するための直感的でカスタマイズ可能な、実行可能な方法を提供します。 スタック、タブ、引き出し、ネストされたナビゲーターをマスターすることで、パラメータの渡、ディープリンク、認証フローとともに、堅牢なモバイル体験をビルドできます。 詳細は、[]の公式の React ナビゲーションのドキュメンテーションを参照してください。 のナビゲーションガイドを有効活用] を最適なコミュニティにチェックしてください。