跳至主要内容
版本：6.x

屏幕

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 bundles 来改进初始加载时特别有用。

children​

渲染回调函数用于返回要用于屏幕的 React 元素。

<Stack.Screen name="Profile">
  {(props) => <ProfileScreen {...props} />}
</Stack.Screen>

如果您需要传递其他属性，可以使用这种方法而不是 component 属性。但是，我们建议使用 React 上下文 来传递数据。

警告

默认情况下，React Navigation 对屏幕组件应用优化以防止不必要的渲染。使用渲染回调函数会移除这些优化。因此，如果您使用渲染回调函数，则需要确保您为屏幕组件使用 React.memo 或 React.PureComponent 以避免性能问题。

此屏幕的可选键。它不需要是唯一的。如果键发生更改，则具有此名称的现有屏幕将被移除（如果在堆栈导航器中使用）或重置（如果在标签或抽屉导航器中使用）。

当我们有一些希望在条件改变时移除或重置的屏幕时，这将非常有用。

<Stack.Screen
  navigationKey={isSignedIn ? 'user' : 'guest'}
  name="Profile"
  component={ProfileScreen}
/>

listeners​

要订阅的事件监听器。有关更多详细信息，请参阅 Screen 上的 listeners 属性。