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

【问题标题】：How to get params from URI scheme of deep link in React navigation?如何从 React 导航中的深层链接的 URI 方案中获取参数？
【发布时间】：2021-10-22 16:27:39
【问题描述】：

我正在使用 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.

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

【问题讨论】：

嗯，这很奇怪。你在关注这个教程吗reactnavigation.org/docs/configuring-links/#passing-params
我按照这个教程，还是不行

标签： reactjs react-native react-navigation deep-linking url-scheme

【解决方案1】：

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

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

【讨论】：

之前我犯了一个错误，以为它已经解决了，但没有。我也尝试了上述解决方案，但它也不起作用。方案是wagal://reset/password?token=eyJhbGc
我觉得应该是ResetPassword: "reset/password:token",吧？
顺便说一句，他们有一个游乐场：reactnavigation.org/docs/configuring-links/#playground
我无法更改深层链接，事实上它来自服务器，我无权访问它的源代码
再次编辑我的答案，这肯定会奏效。祝你好运?

【解决方案2】：

我遇到了同样的问题，我发现了这个解决方案可以在您的导航堆栈中进行编辑。我用过这个教程：https://reactnavigation.org/docs/screen/

<Stack.Screen name="ResetPassword" component={ResetPassword} getId={({ params }) => params.passwordResetId} options={{ headerShown: false, title: "Réinitialiser le mot de passe" }}/>

然后我在我的关联组件中使用它

state: {
   id: this.props.match.params.passwordResetId,
}

【讨论】：