将现有网站 link 重定向到 App Expo React Native

Question

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

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

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

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

谢谢。

Answer 1

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

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

之后：

  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，post 它作为一条消息发送给您的应用程序，如果它等于 https://mywebsitedomain/payment/cancel 做你想做的事情:)

更新

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

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

有关更多信息，请查看： https://github.com/react-native-webview/react-native-webview

将现有网站 link 重定向到 App Expo React Native

Redirect existing website link to app expo react native

javascript

deep-linking

node.js

react-native

expo