React Native中createRef()调用WebView goBack()返回undefined问题求助

嘿，我之前在Expo开发React Native项目时也碰到过这个问题，给你梳理下正确的做法，应该能解决你的困惑：

• 正确初始化并绑定createRef（类组件场景）
  很多时候出现undefined是因为ref的初始化或者绑定步骤出错了。你需要在组件类里正确声明ref，再绑定到WebView上：

  import React, { Component, createRef } from 'react';
  import { WebView } from 'react-native-webview';
  import { Button } from 'react-native';
  
  class WebViewScreen extends Component {
    // 直接用类字段声明ref，不用写构造函数也可以
    webViewRef = createRef();
  
    handleGoBack = () => {
      // 调用goBack前一定要先判断ref是否存在
      if (this.webViewRef.current) {
        this.webViewRef.current.goBack();
      } else {
        console.log("WebView实例还未挂载或ref绑定失败");
      }
    };
  
    render() {
      return (
        <>
          <WebView
            ref={this.webViewRef}
            source={{ uri: 'https://你的目标网址.com' }}
          />
          <Button title="返回上一页" onPress={this.handleGoBack} />
        </>
      );
    }
  }
  

• 函数组件请用useRef替代createRef
  如果你现在用的是更推荐的函数组件，就不要用createRef了，改用useRef：

  import React, { useRef } from 'react';
  import { WebView } from 'react-native-webview';
  import { Button } from 'react-native';
  
  const WebViewScreen = () => {
    const webViewRef = useRef(null);
  
    const handleGoBack = () => {
      if (webViewRef.current) {
        webViewRef.current.goBack();
      }
    };
  
    return (
      <>
        <WebView
          ref={webViewRef}
          source={{ uri: 'https://你的目标网址.com' }}
        />
        <Button title="返回上一页" onPress={handleGoBack} />
      </>
    );
  };
  

• 几个关键排查点

  • 确认你安装并导入了正确的WebView包：Expo里的WebView现在是独立的react-native-webview包，记得先执行expo install react-native-webview，不要用React Native核心里已废弃的WebView。
  • 别在组件未挂载时调用goBack：比如在componentDidMount或者useEffect的空依赖数组里直接调用，这时候WebView还没完成挂载，ref.current会是undefined。
  • 检查WebView是否存在条件渲染：如果你的WebView是通过if判断渲染的，当条件不满足时ref会指向undefined，调用goBack自然会出问题。

内容的提问来源于stack exchange，提问作者jkwli