无法读取未定义的 React Native 的 属性 '#<WebView>'

Question

我在 react-native 中创建了一个 Webview，但是当我导航到任何页面并尝试导航回来时，应用程序关闭了。

我已经阅读了关于 STACK-OVERFLOW 的一些答案并尝试了一些代码来处理 android 的后退按钮，但没有帮助。

这是尝试过的代码：

import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  BackHandler,
} from 'react-native';

import WebView from 'react-native-webview';

const App: () => React$Node = () => {

  const [canBack, setCanBack] = useState(false);
  useEffect(() => {
    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
    console.log('mounted')

    return () => {
      this.backHandler.remove()
      console.log('unmounted')
    }

  }, [canBack]);

  handleBackPress = () => {
    console.log('back btn pressed')
    console.log('canBack is '+canBack)
    if(canBack) {
      this.refs[myWebView].goBack();
      return true;
    }
  }


  onNavigationChange = (navState) => {
    console.log(navState);
    // console.log(navState.canGoBack)
    setCanBack(currentCanBack => navState.canGoBack);
    console.log(canBack);
  };

  return (
      <SafeAreaView style={{ flex: 1,}}>
        <StatusBar barStyle="dark-content" />
        <WebView
          ref={(c) => {this.myWebView = c} }
          source={{ uri: 'https://infinite.red' }}
          domStorageEnabled={true}
          onNavigationStateChange={(navState) => this.onNavigationChange(navState)}
        />
      </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    backgroundColor: 'lightgrey',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

当我按下后退按钮时出现错误 "Cannot read property '#' of undefined react native"

Answer 1

每个： ref={(c) => {this.myWebView = c} }

以下内容： this.refs[myWebView].goBack();

应该be:this.myWebView.goBack();

Answer 2

这里我得到了这个问题的解决方案。

我刚刚使用了 this.myWebView.goBack(); 并且有效。 所以，当我们使用钩子时，可能在 React 0.61 中，我们在函数组件中，我们应该这样使用它。