React Navigation 中如何传递参数到下一个页面？

推荐答案

在 React Navigation 中，可以通过 navigation.navigate 方法的第二个参数来传递参数到下一个页面。具体代码如下：

navigation.navigate('RouteName', { paramName: 'value' });

在目标页面中，可以通过 route.params 来访问传递的参数：

function DetailsScreen({ route }) {
  const { paramName } = route.params;
  return (
    <View>
      <Text>{paramName}</Text>
    </View>
  );
}

本题详细解读

1. 传递参数

在 React Navigation 中，navigation.navigate 方法用于导航到指定的路由。第二个参数是一个对象，用于传递参数到目标页面。例如：

navigation.navigate('Details', { itemId: 86, otherParam: 'anything you want here' });

在这个例子中，itemId 和 otherParam 是传递给 Details 页面的参数。

2. 接收参数

在目标页面中，可以通过 route.params 来访问传递的参数。route 是 React Navigation 自动注入到组件的 props 中的一个对象。例如：

// www.javascriptcn.com code example
function DetailsScreen({ route }) {
  const { itemId, otherParam } = route.params;
  return (
    <View>
      <Text>Item ID: {itemId}</Text>
      <Text>Other Param: {otherParam}</Text>
    </View>
  );
}

3. 默认参数

如果目标页面可能在没有传递参数的情况下被访问，可以为 route.params 设置默认值：

// www.javascriptcn.com code example
function DetailsScreen({ route }) {
  const { itemId, otherParam } = route.params || {};
  return (
    <View>
      <Text>Item ID: {itemId || 'No ID'}</Text>
      <Text>Other Param: {otherParam || 'No Param'}</Text>
    </View>
  );
}

4. 更新参数

在某些情况下，你可能需要在当前页面更新传递的参数。可以通过 navigation.setParams 方法来实现：

navigation.setParams({
  otherParam: 'updated value',
});

5. 注意事项

• 传递的参数应该是可序列化的数据，因为 React Navigation 会在导航过程中将这些参数存储在内存中。
• 如果传递的参数是复杂对象或函数，可能会导致性能问题或意外行为。