将现有网站链接重定向到 app expo react native

如何解决将现有网站链接重定向到 app expo react native

我有一个包含一些支付沙箱的应用。每次用户想要购买产品时，我都会使用“expo-linking”Linking.openURL(sandBoxURL) 在浏览器上打开唯一的付款链接。

如果付款被取消，沙盒会重定向到“https://mywebsitedomain/payment/cancel” 如果支付成功，沙箱会重定向到“https://mywebsitedomain/payment/successful”

我想要实现的是，每当“https://mywebsitedomain/payment/cancel”和“https://mywebsitedomain/payment/successful”链接时，我希望浏览器重定向到我的应用程序的付款取消和付款成功页面在浏览器中触发。

我该怎么做？我得到了使用深层链接等建议。在这种情况下，我不一定需要创建任何链接，我只需要将现有网站链接重定向到我的应用程序。在那种情况下，理想的配置是什么？

谢谢。

解决方法

在这种情况下，我建议使用 WebView 而不是 Linking，因为在用户在浏览器中打开 URL 后，Linking 并没有真正为您提供任何类型的流控制，DeepLinking 理论上可以工作，但它会打开应用程序从初始屏幕开始，然后您必须手动将用户导航到您希望他成为的屏幕，但我认为这不是正确的解决方案。相反，我建议在 Webview 中打开一个 URL 并注入自定义 javascript 代码。通过这种方式，您可以将用户留在您的应用程序中并保持对流程的控制。 react-native-webview 是不推荐使用的模块，应通过包管理器添加具有 onMessage 和 injectedJavaScript 道具，使用这些可以解决此问题。例如：

创建仅包含 webview 的单独屏幕，拉伸到全屏。
使用适当的名称在您的堆栈导航器中导入屏幕。
导航到它时，将 webview props 作为导航参数传递。

之后：

  const jsCode = `
   document.addEventListener("click",() => {
        window.ReactNativeWebView.postMessage(JSON.stringify({type: "click",message : "goBack"}))
    })`;


 const onMsg = (event) => {
    const res = JSON.parse(event.nativeEvent.data);
     if (res.message === "goBack") {
         navigation.goBack();
     }
}

             <WebView
                source={{ uri: params.uri,html: params?.html }}
                androidHardwareAccelerationDisabled
                javaScriptEnabled
                injectedJavaScript={jsCode}
                javaScriptCanOpenWindowsAutomatically
                collapsable
                onMessage={onMsg}
            />

这是一个示例代码，每当用户点击其中的某些内容时，它就会关闭 webview，而您可以检查 window.location.href，将其作为消息发布到您的应用，如果它等于 https://mywebsitedomain/payment/cancel，请执行某些操作你想做:)

更新

正如评论中提到的，对于这个具体任务，webview 提供了 onNavigationStateChange 属性，用于确定 webview 中的导航更新。这可能是一个更好的选择，因为某些网站可能不允许您注入自定义 javascript 代码。但是，javascript 注入也是可能的，也是这里的解决方案之一。由于在这里解释有点困难，我在这里设置了一个示例应用程序，它使用了上述两种方法： https://github.com/RocKer004/webview-example-app

应用程序打开 React Native 导航文档，如果您单击 React Native Express（第一个选项），它将带您返回并关闭 webview（这是使用 onNavigationStateChange 道具处理的），如果您单击最后一个选项那里的 webview 也将被关闭，但这一次是由 javscript 注入处理的。否则，您可以随意浏览网页。

欲了解更多信息，请查看： https://github.com/react-native-webview/react-native-webview