React中如何调用注入ReactNative的WebView的JavaScript代码？

Question

我在React-Native中的WebView中注入了一段JS代码。我想在我的网页上调用这个js代码（使用React），就像在程序中使用API一样，但是我失败了

这是我当前的代码：

const WebAPICode = `
function test() {
  alert('Hello');
}
`;

export default class PluginView extends Component {

  render() {
    return (
      <View {...this.props}>
        <WebView
          ref={webView=> this.webView = webView}
          originWhitelist={['*']}
          source={{ uri: "http://10.0.2.2:3000/" }}
          onLoadEnd={()=>this.webView.injectJavaScript(WebAPICode)}
        />
        <Text>{WebAPICode}</Text>
      </View>
    );
  }
}

我想在React中调用它，但这显然是错误的方式。查了很多资料还是不知道怎么实现。

function App() {
  return (
    <span onClick={()=>test()}>test</span>
  );
}

就像setTimeout函数一样，js标准中没有这个函数，但是浏览器把它添加到了window对象中，window.setTimeout，我也想加上自己定义的对 webview 的功能，就像测试一样。

将测试函数注入到此 webview 中，而不是将其写入脚本标签中。

<html lang="en">
<head>
  <script>
    // The function is defined here, but I want this 
    // definition to be injected into the browser 
    function test() {
      alert('hello');
    }
    /**
     * This is what I want:
     * <WebView injectedJavaScript={`function test() {
     *                                 alert('hello');
     *                               }`}/>
     * Inject the test function into this webview instead
     * of writing it in the script tag.
     */
  </script>
</head>
<body>
  <script>
    test();
  </script>
</body>
</html>

Answer 1

查看 official document of the webview 并了解如何使用它。编写模块时始终参考官方文档。

你可以用这个

const WebAPICode = `alert('Hello')`;
...
      <WebView
          ref={webView=> this.webView = webView}
          originWhitelist={['*']}
          source={{ uri: "http://10.0.2.2:3000/" }}
          javaScriptEnabled={true}
          injectedJavaScript={WebAPICode}
        />

如果你的网站上有这个功能，你可以调用它。

<html>
<head>
    <script language="javascript">
    function test()
    {
         alert('Hello');
    }
   </script>
</head>
<body>
...

const WebAPICode = `test()`;
...
      <WebView
          ref={webView=> this.webView = webView}
          originWhitelist={['*']}
          source={{ uri: "http://10.0.2.2:3000/" }}
          javaScriptEnabled={true}
          injectedJavaScript={WebAPICode}
        />

要执行评论中显示的数据，您必须这样做。

您的 webview 页面执行此操作

var data = {name: "getname"}
window.ReactNativeWebView.postMessage(data);

  handleMessage(e) {
    //여러 데이터가 리스트 형식으로 올때
    let parsedata = JSON.parse(e.nativeEvent.data);
    message = parsedata.name
    if(message == "get name") {
       const data = { name: "John"  }
    this.webview.postMessage(JSON.stringify(data));
    } 
  }
<WebView
 ref={webview => (this.webview = webview)}
 onMessage={mssage => this.handleMessage(mssage)}
}

接收网页浏览页面

document.addEventListener("message", function(event) {
    console.log("Received post message", event);

    test(event.data);
}, false);

Answer 2

您可以从 webview 调用 postMessage 并像这样设置您的 webview onMessage 道具。

onMessage={event => { console.log(event) } }

在您的网络视图中 html:

window.ReactNativeWebView.postMessage("Your Message");

React中如何调用注入ReactNative的WebView的JavaScript代码？

How to call JavaScript code injected into WebView of ReactNative in React?

javascript

webview

reactjs

react-native