【问题标题】:Web view click : url not detected in android , iOS working : react nativeWeb视图点击:在android中未检测到url,iOS工作:本机反应
【发布时间】:2021-10-02 07:02:26
【问题描述】:

我有一个反应原生应用程序,它在登录后加载到 web 视图中的 url。用户在 Web 视图中移动,单击支持的链接。现在我想通过单击 Web 视图中的按钮从 Web 视图中打开共享选项。当我们单击按钮时,我们有一个 url,但我无法使用“onNavigationStateChange”检测到该 url。那么我们如何在没有 url 的情况下处理这个问题呢?我尝试了很多链接,但没有一个让我得到结果。永远不会到达“打开共享控制器”,“导航类型单击”也不会。这是我的示例代码:

 <WebView scalesPageToFit
    style={{ flex: 1 }} source={{ uri: url  }} onLoadStart={() => (setLoading(true))} onLoadEnd={() => (setLoading(false))}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    onNavigationStateChange = {handleNavigationStateChange}
    
    onLoadProgress = {({ nativeEvent }) => {
     
      console.log(nativeEvent.url)     
  }}
    />

const handleNavigationStateChange = navState => {
console.log(navState.url);
console.log(navState.navigationType)
const { url } = navState.url;
if (!url) return;

if (url.includes('Logout')) {
  Alert.alert(
    "Logout",
    "Are you sure you want to logout?",
    [
      {
        text: "No",
        onPress: () => console.log("Cancel Pressed"),
        style: "cancel"
      },
      { text: "Yes", onPress: () => navigation.pop(1) }
    ]
  );
}
if (url.includes('Register')) {
  console.log('OPEN SHARE CONTROLLER')
}
if (navState.navigationType === 'click') {
  // User clicked something
  console.log('User clicked something')

} };

【问题讨论】:

  • onNavigationStateChange 在 web view 的 url 改变时被调用,你的按钮的作用是什么?
  • 网址发生了变化,但在这里没有检测到,因为当我使用原生 iOS 做同样的事情时 - 使用 Xcode,我得到了网址并打开了共享活动控制器。
  • 您能介意分享更多网页代码吗?你可以隐藏敏感细节。

标签: android ios react-native url webview


【解决方案1】:

通过使用setSupportMultipleWindows={false} 和使用 onShouldStartLoadWithRequest 解决。

【讨论】:

  • 你在onShouldStartLoadWithRequest中应用的逻辑是什么?
  • @Habibi27,我正在分享我的代码供您参考```onShouldStartLoadWithRequest={(event) => { if (event.url.includes('Register')) { webViewRef.current.停止加载();设置加载(假); Share.open({ title: "A", message: message, subject: "B", }) .then(result => console.log(result)) .catch(errorMsg => console.log(errorMsg));返回 false } else { 返回 true } }}
  • 感谢@Preetika
猜你喜欢
  • 2018-03-28
  • 2011-10-17
  • 2017-02-26
  • 1970-01-01
  • 2018-02-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-03-01
相关资源
最近更新 更多