WebView 上的 React Native ref.injectJavascript 始终未定义答案

【问题标题】：React Native ref.injectJavascript on WebView always undefinedWebView 上的 React Native ref.injectJavascript 始终未定义
【发布时间】：2020-09-24 23:07:30
【问题描述】：

我在 TabNavigator 中有一个带有 WebView 的简单功能组件，我想在标签集中时注入一些 javascript，如下所示：

import React, {useRef, useEffect} from 'react';
import {WebView} from 'react-native-webview';

export default (props) => {

  const webViewRef = useRef();

  React.useEffect(() => {
    const unsubscribe = props.navigation.addListener('focus', () => {
      webViewRef.current.injectJavascript('console.log("Hello World")');
    });
    return unsubscribe;
  }, []);

  return (
    <WebView ref={webViewRef} />
  );
}

由于某种原因，webViewRef 在侦听器中始终未定义。

如果我执行<WebView ref={(r) => console.log(r)} /> 之类的操作，我会得到如下信息：

编辑：

只需调整提供的示例 - 确实有效，所以我想我必须弄清楚我的代码中发生了什么：

import React, { useRef } from 'react'
import { View } from 'react-native'
import { WebView } from 'react-native-webview'

export default () => {

  const webViewRef = useRef(null);

  const run = `
    document.body.style.backgroundColor = 'blue';
    true;
  `

  setTimeout(() => {
    webViewRef.current.injectJavaScript(run)
  }, 3000)

  return (
    <View style={{ flex: 1 }}>
      <WebView
        ref={webViewRef}
        source={{
          uri:
            'https://github.com/react-native-community/react-native-webview',
        }}
      />
    </View>
  )
}

编辑 2： 调整简单示例并尝试在侦听器内使用 ref 不起作用：

import React, { useRef } from 'react'
import { View } from 'react-native'
import { WebView } from 'react-native-webview'

export default (props) => {

  const webViewRef = useRef(null);



  const run = `
    document.body.style.backgroundColor = 'blue';
    true;
  `
  const handleLoadEnd = () => {
    props.navigation.addListener('focus', () => {
      webViewRef.current.injectJavascript(run)
    })
  }

  return (
    <View style={{ flex: 1 }}>
      <WebView
        ref={webViewRef}
        source={{
          uri:
            'https://github.com/react-native-community/react-native-webview',
        }}
        onLoadEnd={handleLoadEnd}
      />
    </View>
  )
}

编辑 3：useFocusEffect 也有同样的问题：

  useFocusEffect(
    React.useCallback(() => {
      webViewRef.current.injectJavascript('alert("HI")')
    }, [props.navigation])
  )

来源：

【问题讨论】：

您能否检查一下您是否可以通过 addListener 访问 webViewRef.current？
它似乎总是未定义它是如此令人困惑。
你能用延迟 3000-5000 毫秒的 setTimeout 测试你的代码吗？如果 ref 仍然未定义，则说明有问题。您还可以在传递 ref 的数组中创建一个 useEffect。如果设置了它将被自动调用
这与监听器的工作方式肯定有些奇怪——因为如果直接在useEffect 中调用它，我可以使用 ref。在侦听器中，即使超时，它也不起作用。

标签： javascript reactjs react-native

【解决方案1】：

哦，伙计，这真是又一个史诗般的拔头发日子：

  webViewRef.injectJavascript < BAD
  webViewRef.injectJavaScript < GOOD

请有人把我生命的最后 4 小时还给我

【讨论】：

谢谢你，JavaScript 中的大写 S 真的很调皮。
有趣的是，我今天刚刚遇到了这些可怕的情况之一，其中我需要的选项是 lazyLoad 而不是 lazyload
非常感谢！我确实花了几个小时试图解决这个问题！

【解决方案2】：

如果onLoadEnd 事件已触发，则将设置 ref。所以你必须像这样调整你的代码：

export default (props) => {

  const webViewRef = useRef();

  const handleLoadEnd = () => {
    props.navigation.addListener('focus', () => {
      webViewRef.current.injectJavascript('console.log("Hello World")');
    });
  }

  return (
    <WebView ref={webViewRef} onLoadEnd={handleLoadEnd}/>
  );
}

我有一个工作示例。看这里https://github.com/Tracer1337/MRGVP/blob/master/vertretungsplan/components/PaginatedWebview/PaginatedWebview.js

【讨论】：

谢谢，这是有道理的，我已将侦听器添加到onLoadEnd，但我仍然遇到同样的问题，webViewRef 未定义:(
不幸的是，这不起作用，我认为它可以缩小到听众，请参阅我的帖子Edit 2中的示例