如何在反应导航 5.0 中访问传递给基于类的组件的参数？

Question

使用 react-navigation 你可以传递这样的参数：

this.props.navigation.navigate(screen, {param: value});

在以前的版本中，您可以像这样访问参数：

props.navigation.state.params

在新版本的 react-navigation (5.0) 中，它们使用功能组件，并且您似乎无法像以前那样访问参数。相反，您可以像这样编写组件和访问参数：

function HomeScreen({ navigation, route }) {
  React.useEffect(() => {
    if (route.params?.post) {
      // Post updated, do something with `route.params.post`
      // For example, send the post to the server
    }
  }, [route.params?.post]);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Create post"
        onPress={() => navigation.navigate('CreatePost')}
      />
      <Text style={{ margin: 10 }}>Post: {route.params?.post}</Text>
    </View>
  );
}

如何访问传递给组件的参数，而不必将项目中的所有组件从基于类的组件更改为基于功能的组件？

Answer 1

您只需更改用于访问参数的代码

props.navigation.state.params

到

props.route.params

一切都很好，无需将基于类的组件更改为基于功能的组件。

但我建议您开始轻松地迁移，这样您的代码就会符合最新的语法。

您可以在此世博会小吃上的代码段中查看此示例