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



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

如果支付被取消,沙盒将重定向到"https://mywebsitedomain/payment/cancel"如果支付成功,沙盒将重定向到"https://mywebsitedomain/payment/successful">

我想要实现的是我想要浏览器重定向到我的应用程序的支付取消和支付成功页面每当"https://mywebsitedomain/payment/cancel"one_answers"https://mywebsitedomain/payment/successful"链接在浏览器中被触发。

我该怎么做?我得到了一些建议,比如使用深度链接。在这种情况下,我不一定需要创建任何链接,我只需要现有的网站链接被重定向到我的应用程序。在这种情况下,什么是理想的配置?

谢谢。

在这种情况下,我建议使用WebView而不是链接,因为链接并没有真正给你任何类型的控制流后,用户在浏览器中打开一个URL, DeepLinking理论上会工作,但它会从启动屏幕打开应用程序,然后你将不得不手动导航用户到你想要他的屏幕,我不认为这是适当的解决方案。相反,我建议在Webview中打开一个URL并注入自定义javascript代码。通过这种方式,你可以将用户留在应用程序中,并保持对流的控制。react-native-webview是一个被弃用的模块,应该通过包管理器添加onMessageinjectedJavaScript道具,使用这些道具可以解决这个问题。示例:

  1. 创建单独的屏幕,只包含webview,拉伸到全屏

  2. 用合适的名称在stacknavigator中导入屏幕。

  3. 当导航到它时,将webview props作为导航参数。

  4. 后来

:

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提供了onNavigationStateChangeprop,这意味着确定webview中的导航更新。这可能是一个更好的选择,因为一些网站可能不允许您注入自定义javascript代码。但是,javascript注入也是可能的,也是解决方案之一。因为在这里解释有点困难,所以我在这里设置了一个示例应用,它使用了上述两种方法:https://github.com/RocKer004/webview-example-app

App打开react native导航文档,如果你点击react native Express(第一个选项),它会带你回去并关闭webview(这是使用onNavigationStateChangeprop处理的),如果你点击最后一个选项,webview也将被关闭,但这是由javascript注入处理的。否则,你可以自由浏览网页。

更多信息,请查看:https://github.com/react-native-webview/react-native-webview

最新更新