React Native Academy · 课时

在屏幕之间导航并传递参数

使用 navigation.navigate 在屏幕之间切换，通过第二个参数传递参数，并在目标屏幕中使用 route.params 读取参数。

第 2 / 4 课13 个步骤

在屏幕之间导航并传递参数 是 CoddyKit 上的免费 React Native Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Native Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Native Academy 课程共包含 4 节课。

屏幕中的 navigation 属性

在 React Navigation 导航器中注册为屏幕的每个组件，都会自动接收一个 navigation 属性。该对象提供了在屏幕之间切换、返回以及管理导航堆栈的方法。您还可以在嵌套组件中使用 useNavigation 钩子访问它。

function HomeScreen({ navigation }) {
  // navigation.navigate, navigation.goBack, etc.
  return <View />;
}

使用 navigation.navigate 进行导航

调用 navigation.navigate('ScreenName') 可以切换到另一个屏幕。如果该屏幕已经位于堆栈中，再次导航到它时，React Navigation 会转到现有实例，而不会添加重复实例。使用 navigation.push('ScreenName') 可以始终推入一个新实例。

function HomeScreen({ navigation }) {
  return (
    <Button
      title='Go to Details'
      onPress={() => navigation.navigate('Details')}
    />
  );
}

使用 navigation.goBack 返回

调用 navigation.goBack() 可以将当前屏幕从堆栈中移除并返回上一个屏幕。在 iOS 上，默认启用向右滑动返回手势。在 Android 上，硬件返回按钮会自动调用 goBack。使用 navigation.popToTop() 可以直接返回第一个屏幕。

function DetailsScreen({ navigation }) {
  return (
    <Button
      title='Go Back'
      onPress={() => navigation.goBack()}
    />
  );
}

导航时传递参数

向 navigation.navigate 传入第二个参数，即可向目标屏幕发送参数。params 对象可以包含任何可序列化的数据，例如 ID、字符串和布尔值。请避免传递类实例或函数等复杂的不可序列化对象。

function HomeScreen({ navigation }) {
  return (
    <Button
      title='View Post'
      onPress={() =>
        navigation.navigate('Details', {
          postId: 42,
          title: 'React Navigation Deep Dive',
        })
      }
    />
  );
}

使用 route.params 读取参数

目标屏幕除了接收 navigation 属性外，还会接收一个 route 属性。您可以通过 route.params 访问传入的参数。请始终提供默认值，以防屏幕在没有参数的情况下打开，例如作为初始屏幕打开时。

function DetailsScreen({ route, navigation }) {
  const { postId, title } = route.params ?? {};
  return (
    <View>
      <Text>Post ID: {postId}</Text>
      <Text>Title: {title}</Text>
    </View>
  );
}

Stack.Screen 上的默认参数

在 Stack.Screen 上设置 initialParams，可以提供默认参数值。这些默认值会与运行时传入的参数合并，因此即使屏幕作为初始路由打开，也始终拥有一组完整的可用值。

<Stack.Screen
  name='Details'
  component={DetailsScreen}
  initialParams={{ postId: 0, title: 'Unknown' }}
/>

从屏幕更新参数

屏幕可以使用 navigation.setParams 更新自身的参数。当当前屏幕上的操作（例如编辑表单字段）需要反映在导航栏标题中时，这非常有用。参数更新会触发屏幕重新渲染。

function DetailsScreen({ route, navigation }) {
  const { title } = route.params;

  return (
    <Button
      title='Update Title'
      onPress={() => navigation.setParams({ title: 'Updated Title' })}
    />
  );
}

使用 useNavigation 钩子

未注册为屏幕的深层子组件不会自动接收 navigation 属性。请使用 React Navigation 提供的 useNavigation() 钩子，在导航器树中的任意位置访问导航对象，而无需逐层传递属性。

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

function MyButton() {
  const navigation = useNavigation();
  return (
    <Button
      title='Go to Profile'
      onPress={() => navigation.navigate('Profile')}
    />
  );
}

使用 useRoute 钩子

同样，您可以使用 useRoute() 钩子，在非屏幕组件中访问 route.params。当深层嵌套组件需要读取当前屏幕的参数，而您又不想将 route 属性逐层传递时，这会非常有用。

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

function PostHeader() {
  const route = useRoute();
  const { title } = route.params ?? {};
  return <Text style={{ fontWeight: 'bold' }}>{title}</Text>;
}

根据参数设置导航栏标题

您可以通过向 options 属性传入一个函数，根据路由参数动态设置导航栏标题。该函数会接收 route 对象，因此您可以将参数值用作屏幕标题，而无需额外的状态。

<Stack.Screen
  name='Details'
  component={DetailsScreen}
  options={({ route }) => ({ title: route.params.title ?? 'Details' })}
/>

返回并传回数据

要将数据从子屏幕传回父屏幕，请使用 navigation.navigate，传入父屏幕的名称，并将返回数据作为参数。父屏幕会接收到更新后的参数。或者，您也可以将回调函数作为参数传给子屏幕，并在返回前调用它。

// In child screen
navigation.navigate('Home', { selectedItem: 'apple' });

// In parent screen — read route.params.selectedItem

快速检查

测试您对本课 React Navigation 屏幕导航和参数的理解。

在交互式课程中回答

课程回顾

在本课中，您学习了：使用 navigation.navigate 切换到另一个屏幕、将参数作为 navigate 的第二个参数传入，以及 在目标屏幕中使用 route.params 读取参数。接下来，我们将学习底部 Tab 导航器。

免费开始

用 AI 导师学习 JavaScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 30
课程: 120

免费开始学习查看完整课程

常见问题解答

「在屏幕之间导航并传递参数」课时是免费的吗？

是的 — 「在屏幕之间导航并传递参数」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Native Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Native Academy 课程共包含 4 节课。

「在屏幕之间导航并传递参数」这节课中我会学到什么？

使用 navigation.navigate 在屏幕之间切换，通过第二个参数传递参数，并在目标屏幕中使用 route.params 读取参数。你通过在浏览器中直接运行的动手代码来练习 React Native Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Native Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Native Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「在屏幕之间导航并传递参数」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Native Academy 课中编写并运行代码吗？

能。每节 React Native Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Native Academy