Web视图上的React Native ref.injectJavascript始终未定义

我有一个简单的功能组件，在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} />
  );
}

编辑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>
  )
}

资料来源：

---

如果触发了

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

导出默认值（道具）=>{
const webViewRef=useRef（）；
常量handleLoadEnd=（）=>{
props.navigation.addListener（'focus'，（）=>{
webViewRef.current.injectJavascript（'console.log（“helloworld”））；
});
}
返回(
);
}

---

我有一个有效的例子。请参见此处

如果触发了

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

导出默认值（道具）=>{
const webViewRef=useRef（）；
常量handleLoadEnd=（）=>{
props.navigation.addListener（'focus'，（）=>{
webViewRef.current.injectJavascript（'console.log（“helloworld”））；
});
}
返回(
);
}

---

我有一个有效的例子。看这里

哦，天哪，这真是又一个划时代的日子：

  webViewRef.injectJavascript < BAD
  webViewRef.injectJavaScript < GOOD

webViewRef.javascript

---

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

哦，天哪，这真是又一个史诗般的拉扯头发的日子：

  webViewRef.injectJavascript < BAD
  webViewRef.injectJavaScript < GOOD

webViewRef.javascript

---

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

你能检查一下你能从addListener中访问

webViewRef.current

吗？它似乎总是没有定义，太令人困惑了。你能用延迟3000-5000ms的设置超时测试你的代码吗？如果ref仍然没有定义，那么就有问题了。你还可以在传递ref的数组中创建一个useffect。如果设置了它，它将被自动调用。这在侦听器中的工作方式肯定有些奇怪——因为如果直接在

useffect

中调用，我可以使用ref。在监听器中，即使超时，它也不起作用。您能检查一下您是否可以从addListener访问

webViewRef.current

？它似乎总是未定义，这太令人困惑了。您能用延迟3000-5000ms的setTimeout测试您的代码吗？如果ref仍然没有定义，那么就有问题了。你还可以在传递ref的数组中创建一个useffect。如果设置了它，它将被自动调用。这在侦听器中的工作方式肯定有些奇怪——因为如果直接在

useffect

中调用，我可以使用ref。在侦听器中，即使超时，它也不工作。谢谢，这是有意义的，我已将侦听器添加到

onLoadEnd

，但仍然存在相同的问题，

webViewRef

未定义：（不幸的是，这不起作用，我认为它可以缩小到侦听器的范围，请参见我的PostThankyu的

Edit 2

中的示例，这很有意义，我已经将侦听器添加到

onLoadEnd

，但仍然存在相同的问题，

webViewRef

未定义：（不幸的是，这不起作用，我想它可以缩小到听者的范围，请看我帖子的

edit2

中的例子谢谢你，JavaScript中的大写字母S真的很顽皮。有趣的是，我今天在一个库中遇到了一个可怕的情况，我需要的选项是

lazyLoad

not

lazyload

谢谢你，JavaScript中的大写字母S真的很调皮。有趣的是，我今天在一个库中遇到了一个糟糕的情况，我需要的选择是

lazyload

not

lazyload