如何从React导航中的深层链接的URI方案中获取参数？

Question

我正在使用 React Navigation 6 设置 URI 方案深度链接，以下是我的配置方式：

const linking = {
  prefixes: ["wagal://"],
  config: {
    ResetPassword: {
      path: "reset/password/:token",
      params: {
        token: null,
      },
    },
  },
};

function homeStack() {

  return (
    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
      <Stack.Navigator>
        <Stack.Screen component={ResetPassword} name="ResetPassword" />
        //...
      </Stack.Navigator>
    </NavigationContainer>
  );
}

如果我去wagal://reset/password?token=123456789它会将我重定向到重置密码屏幕中的应用程序，但我无法从中获取令牌参数ResetPassword：

function ResetPassword({ route }) {
  const {token} = route.params;
  // ...
}

它抛出以下错误：

undefined is not an object (evaluating route.params.token)

但是如果我尝试使用下面的代码在PasswordReset屏幕中获取整个URL，它会显示带有令牌的整个URI：

  useEffect(() => {
    Linking.getInitialURL().then((url) => {
      console.log(`url`, url);
    });
  }, []);

输出：

wagal://reset/password?token=123456789

我可以使用slice,substring方法，但是必须有一种方法可以使用某些方法获取参数？

我也尝试过这个navigation.getParam("token");，但出现以下错误：

navigation.getParam is not a function。

有人可以帮忙吗？提前致谢。

Answer 1

尝试用这个来改变你的配置：

const linking = {
  prefixes: ["wagal://"],
  config: {
    screens:{
      ResetPassword: "reset/password",
    },
  },
};