为什么 WebView 脚本注入不起作用？

Question

本文档建议我应该能够将值注入 WebView 组件显示的网页，以便加载页面时可以使用该值：

https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native

具体来说，下面的代码展示了如何在 window 对象中设置一个值，但没有展示它是如何使用的：

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

export default class App extends Component {
  render() {
    const runFirst = `
      window.isNativeApp = true;
      true; // note: this is required, or you'll sometimes get silent failures
    `;
    return (
      <View style={{ flex: 1 }}>
        <WebView
          source={{uri: 'my-url-here'}}
          injectedJavaScriptBeforeContentLoaded={runFirst}
        />
      </View>
    );
  }
}

我正在加载的页面如下所示：

<html>
  <body>
    <script>
    alert(window.isNativeApp)
    </script>
  </body>
</html>

显示 undefined。我也试过：

<html>
  <body>
    <script>
    var fn = function() {
      alert(window.isNativeApp)
    }
    document.addEventListener('DOMContentLoaded', fn, false)
    </script>
  </body>
</html>

结果相同。鉴于我应该能够发送网页值，我应该如何使用它们？

来自我的 package.json:

"react-dom": "~16.9.0",
"react-native": "^0.62.1",
"react-native-webview": "^8.2.1",

附录一

事实上，以上似乎根本运行。如果我尝试以下操作：

    const runFirst = `
      console.log('INJECTION')
      alert('INJECTION')
      true; // note: this is required, or you'll sometimes get silent failures
    `;

我既没有收到警报，也没有在日志中找到任何踪迹。当然，我不确定 alert() 是否可以在加载文档之前工作，或者我是否可以在常规应用程序的控制台输出中看到日志

相比之下 injectedJavaScript 似乎运行，尽管在文档加载之后，这意味着 <script>在我的文档运行中，该值尚未设置

Answer 1

对于下一个为此苦苦挣扎的可怜的草皮，图书馆坏了，将（有一天）被修复，但与此同时，这是有效的：

<WebView
  source={{uri: 'my-url-here'}}
  injectedJavaScriptBeforeContentLoaded={runFirst}
  onMessage={event => { alert(event.nativeEvent.data )}}
/>

onMessage 用于另一个方向的通信，但它的存在使代码有效

为什么 WebView 脚本注入不起作用？

Why don't WebView script injections work?

webview

react-native