javascript - 将现有网站链接重定向到应用程序博览会 react 原生

Question

我有一个有一些支付沙箱的应用程序。我正在使用“expo-linking”Linking.openURL(sandboxURL)每次用户想要购买产品时，在浏览器上打开唯一的支付链接。
如果取消付款，沙箱将重定向到“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 并注入(inject)自定义 javascript 代码。通过这种方式，您可以将用户保留在您的应用程序中并保持对流程的控制。 react-native-webview这是不推荐使用的模块，应该通过包管理器添加 onMessage和 injectedJavaScript Prop ，使用这些可以解决这个问题。
举个例子 :

创建仅包含 webview 的单独屏幕，拉伸(stretch)到全屏。

使用适当的名称在您的 stacknavigator 中导入屏幕。

导航到它时，将 webview Prop 作为导航参数传递。

然后:

  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 prop，用于确定 webview 中的导航更新。这可能是一个更好的选择，因为某些网站可能不允许您注入(inject)自定义 javascript 代码。但是，javascript 注入(inject)也是可能的，也是这里的解决方案之一。
由于这里解释起来有点困难，所以我在这里设置了一个示例应用程序，它使用了上述两种方法:
https://github.com/RocKer004/webview-example-app
应用程序打开 react native 导航文档，如果您单击 React Native Express(第一个选项)，它将带您返回并关闭 webview(这是使用 onNavigationStateChange Prop 处理的)，如果您单击最后一个选项 webview 也是将要关闭，但这次由 javscript 注入(inject)处理。否则，您可以自由浏览网页。
有关更多信息，请检查:
https://github.com/react-native-webview/react-native-webview