尝试在 react-native 中停止 webView 加载时出现未定义的错误

Question

在这里查看 react-native 文档和各种答案后，我可以看到：

this.refs[WEBVIEW_REF].stopLoading();

用于阻止 webView 继续加载。

我试过了，但总是得到：

undefined is not an object (evaluating 'this.refs[WEBVIEW_REF]')

我的代码如下，我试图阻止应用加载帮助页面并在浏览器而不是应用中启动。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  WebView,
  Linking,
} from 'react-native';

const HEADER = '#3b5998';
const BGWASH = 'white';

const WEBVIEW_REF = 'webview';
const DEFAULT_URL = 'https://somesite.com/';

export default class reactNativeApp extends Component {
  state = {
    url: DEFAULT_URL,
    scalesPageToFit: true,
  };
  _onShouldStartLoadWithRequest(e) {
    if (e.url.indexOf('assistenza') >= 0) {
      Linking.openURL(e.url);
      return false
    }

    return true
  }
  _onNavigationStateChange(e) {
    if (e.url.indexOf('assistenza') >= 0) {
      this.refs[WEBVIEW_REF].stopLoading();
      Linking.openURL(e.url);

      return false
    }

    return true
  }
  render() {
    return (
      <View>
        <WebView
          ref={WEBVIEW_REF}
          automaticallyAdjustContentInsets={false}
          style={styles.webView}
          source={{uri: this.state.url}}
          javaScriptEnabled={true}
          domStorageEnabled={true}
          decelerationRate="normal"
          startInLoadingState={true}
          scalesPageToFit={this.state.scalesPageToFit}
          onShouldStartLoadWithRequest={this._onShouldStartLoadWithRequest}
          onNavigationStateChange={this._onNavigationStateChange}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent('reactNativeApp', () => reactNativeApp);

有什么想法吗？我见过的每个例子都使用它：/

Answer 1

您需要使用以下任一方式绑定函数：

constructor (props) {
  super(props)

  this._onNavigationStateChange = this._onNavigationStateChange.bind(this)
}

或者在render:

onNavigationStateChange={this._onNavigationStateChange.bind(this)}