Question

可以在React Native Web视图上处理URL更改。

我尝试使用onNavigationStateChange侦听器处理。但它只有一次射击。当页面加载触发onNavigationStateChange时。当我导航到另一个页面时，此事件不会触发。

有什么想法吗？

Answer 1

尝试升级React Native（和React）版本。它应该是固定的。也许这是一个老问题，因为现在它工作正常。

点击此链接：React Native webview get url

Answer 2

参考import { WebView } from 'react-native-webview'

请尝试按照 code/method 获取当前导航 path/url，因为在您的情况下 onNavigationStateChange 这可能不会返回导航路径，因此您可以尝试 onLoadProgress。

代替这个

 onNavigationStateChange={(state) => {
  console.log("current_path",path);

 }}

试试这个

这可能会被多次调用，请相应地处理您的情况。

 onLoadProgress={({ path}) => {
 console.log("current_path",path);
 }}

<块引用>

这就是我的 WebView 的样子

  <WebView
    source={{ uri: this.state.url }}
    onLoadEnd={() => this.hideSpinner()}
    onMessage={onMessage.bind(this)}
    ref={WEBVIEW_REF => (this.WebViewRef = WEBVIEW_REF)}
    startInLoadingState={true}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    onLoadProgress={({ nativeEvent }) => {
       //your code goes here       
    }}
    onNavigationStateChange={(state) => {
       //your code goes here       
    }} 
   />

Answer 3

我在 React Native WebView 中加载网站链接，当我点击它导航到默认移动浏览器时，它有按钮。

在 react native android 当前场景中运行应用程序：当我点击网站中的按钮时，它导航到默认浏览器，但没有得到我在上述建议中尝试过的 url。

预期场景：当我点击网站上的那个按钮时，它不应该导航到默认浏览器，我想要那个在默认浏览器中打开的网址。

my react version: "react-native": "0.64.0",

onLoadProgress = {({ nativeEvent }) => {
    //your code goes here       
}}
onNavigationStateChange={navState => {
    console.log("navState ", navState);
}}

Answer 4

 onNavigationStateChange={({ url, canGoBack }) => {
          console.log("url>>>>>>>>",url);
        }}

React Native Webview处理url更改侦听器

4 个答案: