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

Question

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

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

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

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

谢谢你。

Answer 1

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

1. 创建仅包含 webview 的单独屏幕，拉伸至全屏。

2. 使用适当的名称将屏幕导入 stacknavigator 中。

3. 导航到它时，将 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}
            />

这是一个示例代码，每当用户单击其中的某些内容时，它就会关闭网络视图，相反，您可以检查window.location.href，将其作为消息发布到您的应用程序，以及它是否等于https://mywebsitedomain/payment/cancel执行您想做的操作:)

更新

正如评论中提到的，对于这个具体任务，webview 提供了onNavigationStateChangeprop，它的目的是确定 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