Screen
Screen コンポーネントは、ナビゲーター内の画面の様々な側面を設定するために使用されます。
Screen は createXNavigator 関数から返されます。
const Stack = createNativeStackNavigator(); // Stack contains Screen & Navigator properties
ナビゲーターを作成した後、Navigator コンポーネントの子として使用できます。
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
各画面に対して、少なくとも名前とレンダリングするコンポーネントを指定する必要があります。
プロパティ
name
画面に使用する名前。文字列を受け付けます。
<Stack.Screen name="Profile" component={ProfileScreen} />
この名前は、画面に移動するために使用されます。
navigation.navigate('Profile');
また、route の name プロパティにも使用されます。
サポートされていますが、画面名にスペースや特殊文字を使用しないことをお勧めし、シンプルに保ってください。
options
画面がナビゲーターにどのように表示されるかを設定するためのオプション。オブジェクト、またはオブジェクトを返す関数のいずれかを受け付けます。
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={{
title: 'Awesome app',
}}
/>
関数を渡すと、route と navigation が渡されます。
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={({ route, navigation }) => ({
title: route.params.userId,
})}
/>
詳細は、画面のオプション を参照してください。
initialParams
画面に使用する初期パラメーター。画面が initialRouteName として使用されている場合、initialParams のパラメーターが含まれます。新しい画面に移動する場合、渡されたパラメーターは初期パラメーターと浅いマージが行われます。
<Stack.Screen
name="Details"
component={DetailsScreen}
initialParams={{ itemId: 42 }}
/>
getId
画面に使用する一意のIDを返すコールバック。ルートパラメーターを含むオブジェクトを受け取ります。
<Stack.Screen
name="Profile"
component={ProfileScreen}
getId={({ params }) => params.userId}
/>
デフォルトでは、navigate('ScreenName', params) は名前で画面を識別します。そのため、ScreenName にいて ScreenName に再び移動しても、パラメーターが異なっていても新しい画面は追加されません - 代わりに現在の画面が新しいパラメーターで更新されます。
// Let's say you're on `Home` screen
// Then you navigate to `Profile` screen with `userId: 1`
navigation.navigate('Profile', { userId: 1 });
// Now the stack will have: `Home` -> `Profile` with `userId: 1`
// Then you navigate to `Profile` screen again with `userId: 2`
navigation.navigate('Profile', { userId: 2 });
// The stack will now have: `Home` -> `Profile` with `userId: 2`
getId を指定し、undefined を返さない場合、画面は画面名と返されたIDの両方で識別されます。つまり、ScreenName にいて、異なるパラメーターで ScreenName に再び移動し、getId コールバックから異なるIDを返す場合、スタックに新しい画面が追加されます。
// Let's say you're on `Home` screen
// Then you navigate to `Profile` screen with `userId: 1`
navigation.navigate('Profile', { userId: 1 });
// Now the stack will have: `Home` -> `Profile` with `userId: 1`
// Then you navigate to `Profile` screen again with `userId: 2`
navigation.navigate('Profile', { userId: 2 });
// The stack will now have: `Home` -> `Profile` with `userId: 1` -> `Profile` with `userId: 2`
getId コールバックは、同じIDを持つ画面がスタックに複数回表示されないようにするためにも使用できます。
// Let's say you have a stack with the screens: `Home` -> `Profile` with `userId: 1` -> `Settings`
// Then you navigate to `Profile` screen with `userId: 1` again
navigation.navigate('Profile', { userId: 1 });
// Now the stack will have: `Home` -> `Profile` with `userId: 1`
上記の例では、params.userId がIDとして使用されており、同じ userId を持つ画面への後続のナビゲーションは、スタックに新しい画面を追加する代わりに、既存の画面に移動します。異なる userId を持つナビゲーションが行われた場合、新しい画面が追加されます。
タブまたはドロワーナビゲーターで getId が指定されている場合、IDが変更されると画面が再マウントされます。
component
画面にレンダリングするReactコンポーネント。
<Stack.Screen name="Profile" component={ProfileScreen} />
getComponent
画面にレンダリングするReactコンポーネントを返すコールバック。
<Stack.Screen
name="Profile"
getComponent={() => require('./ProfileScreen').default}
/>
必要なときにProfileScreenモジュールを遅延評価する場合、componentプロパティの代わりにこのアプローチを使用できます。これは、初期読み込みを改善するためにramバンドルを使用する場合に特に便利です。
children
画面に使用するReact要素を返すレンダリングコールバック。
<Stack.Screen name="Profile">
{(props) => <ProfileScreen {...props} />}
</Stack.Screen>
追加のプロパティを渡す必要がある場合、componentプロパティの代わりにこのアプローチを使用できます。ただし、データの受け渡しにはReactコンテキストを使用することをお勧めします。
デフォルトでは、React Navigationは不要なレンダリングを防ぐために画面コンポーネントに最適化を適用します。レンダリングコールバックを使用すると、これらの最適化が削除されます。そのため、レンダリングコールバックを使用する場合は、パフォーマンスの問題を回避するためにReact.memoまたはReact.PureComponentを使用する必要があります。
navigationKey
この画面のオプションのキー。一意である必要はありません。キーが変更されると、この名前を持つ既存の画面は（スタックナビゲーターで使用されている場合）削除されるか、（タブまたはドロワーナビゲーターで使用されている場合）リセットされます。
これは、条件が変更されたときに削除またはリセットする必要がある画面がある場合に役立ちます。
<Stack.Screen
navigationKey={isSignedIn ? 'user' : 'guest'}
name="Profile"
component={ProfileScreen}
/>
listeners
購読するイベントリスナー。Screenのlistenersプロパティの詳細を参照してください。