如何在 React Navigation v5 中导航？

Question

所以我使用 React Navigation v4 有一段时间了，我想换成 RN v5。

那是我使用的代码，它工作正常：

      this.props.navigation.navigate("Tag", {
        date: Moment.utc(this.state.activityDate).format("YYYY-MM-DD"),
      }); 

然后我尝试更改它，因为 Navigator 设置已更改，所以我将其更改为：

      this.props.navigation.navigate("CheckStack", {
        screen: "Tag",
        params: { date: Moment.utc(this.state.activityDate).format("YYYY-MM-DD")}
      }); 

但是，这不起作用，我收到此错误：

 ERROR  The action 'NAVIGATE' with payload {"name":"CheckStack","params":{"screen":"Tag","params":{"date":"2022-11-30"}}} was not handled by any navigator.

Do you have a screen named 'CheckStack'?

我认为屏幕设置正确，因为当我在导航器中为该屏幕设置标题时，它会更改应更改的内容，并且我可以使用导航，例如 Tab 导航有效。

另外：我看到他们改变了参数。 是否仍然可以在没有导航的情况下将值传递给参数？

我在基于 class 的组件屏幕上有这个导航选项：

  static navigationOptions = ({ navigation }) => {
    return {
      headerRight: () => (
        <TouchableOpacity onPress={navigation.getParam("unlockUserHandler")}>
          <Icon
            style={{ paddingRight: 20 }}
            size={25}
            color="white"
            name="lock-open"
          />
        </TouchableOpacity>
      ),
    };
  };

然后在我的 componentDidMount 中，我将它绑定到 class 中的 function：

this.props.navigation.setParams({
  unlockUserHandler: this.checkUnlockHandler.bind(this),
});

我将逻辑直接移动到导航器中 - 可以说是按钮，但我现在如何在该屏幕中调用 Function，因为我无法将 Function 移出它。 这是导航器中的新设置。

  headerRight: () => (
    <TouchableOpacity onPress={console.log("unlockUserHandler")}>
      <Icon
        style={{ paddingRight: 20 }}
        size={25}
        color="white"
        name="lock-open"
      />
    </TouchableOpacity>
  ),

在 onpress 中，我想调用参数 unblockUserHandler，但是当我尝试以新方式进行操作时，我无法获得任何参数。 是否有任何指导，因为该更改会影响我的整个应用程序，并且很难将您的头脑集中在您实际需要更改的内容上。

有效的旧电话：

navigation.getParam("unlockUserHandler")

Answer 1

您还需要像那样更改导航文件中的屏幕名称。

  <Stack.Screen name="CheckStack" component={Your screen} />