Question

在WebView中我添加了index.html

<WebView     
   source={{ uri: 'file:///android_asset/index.html' }}    
   startInLoadingState={true}    
   style={{ marginTop: 20, height: 100 }} />

在index.html文件中

<!DOCTYPE html>
<html>
<header>
    <link rel="stylesheet" href="./mathquill.css" />
    <script src="./jquery.min.js"></script>
    <script src="./mathquill.js"></script>
    <script>
        var MQ = MathQuill.getInterface(2);
    </script>
</header>
<body>
        <span id="problem">ax^2 + bx + c = 0</span>
        <script>
          var problemSpan = document.getElementById('problem');
          MQ.StaticMath(problemSpan);
        </script>
</body>
</html>

我想知道如何与WebView通信以更改要显示的文本。

Answer 1

找到解决方案。

将此添加到index.html

  document.addEventListener("message", function(data) {
     ...
  }

将WebView更改为

  <WebView 
    ref={(webview) => this.webview = webview }
    source={{ uri: 'file:///android_asset/index.html' }}
    startInLoadingState={true}
    style={{ marginTop: 20, height: 100 }}
  />

并发布数据（我在componentDidMount中测试）

  componentDidMount() {
    this.webview.postMessage('message')
  }

通过WebView将Mathquill集成到React Native

1 个答案: