Screen

Screen 元件用於設定導航器內畫面各方面的設定。

createXNavigator 函式會回傳一個 Screen

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

事件訂閱清單。有關更多詳細資料，請參閱螢幕的listeners道具。