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

Question

After looking through the react-native docs and various answers on here, I can see:

this.refs[WEBVIEW_REF].stopLoading();

is used to stop the webView from continuing to load.

I've tried this but always get an:

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

My code is as follows and I'm trying to stop the app from loading the help page and launch in a browser rather than the app.

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);

Any thoughts on why this is? Every example I've seen used it :/

Answer 1

You need to bind the function using either:

constructor (props) {
  super(props)

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

Or in render :

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