无法在React-Native Android WebView中渲染画布或运行脚本

Question

I am trying to render Chart.js charts in my webview in react-native application. 我正在尝试在react-native应用程序的Chart.js中呈现Chart.js图表。 But neither I am able to do postMessage or render the canvas chart. 但是我都无法执行postMessage或呈现画布图表。 I think my function in script tag itself is not working could someone please let me know what I am doing wrong. 我认为脚本标签本身的功能无法正常工作，有人可以让我知道我在做什么错。

PS: I tried to check if atleast postmessage might work using injectJavascrpt option in webview even that is not sending any message on my webview. PS：我尝试使用webview injectJavascrpt选项检查至少一个后postmessage是否可以工作，即使在我的webview上没有发送任何消息。

Here is the component code I have written to plot the chart 这是我为绘制图表而编写的组件代码

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

class WebViewGraph extends Component {
  state = {
    init: `
      <html>
        <head>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"/>
        </head>
        <body>
          <div>
          <canvas id="chart"></canvas>
          <h1>hello</h1>
          <p>gyfgyg</p>
          </div>
        <script>
          function abc() {
            var ctx = document.getElementById("chart").getContext("2d"); 
            var gradient = ctx.createLinearGradient(0, 0, 0, 400);
                gradient.addColorStop(0, 'rgba(250,174,50,1)');   
                gradient.addColorStop(1, 'rgba(250,174,50,0)');
            var data = {
                        labels : ["02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","00:00"],
                        datasets: [
                            {
                                fillColor : gradient, // Put the gradient here as a fill color
                                strokeColor : "#ff6c23",
                                pointColor : "#fff",
                                pointStrokeColor : "#ff6c23",
                                pointHighlightFill: "#fff",
                                pointHighlightStroke: "#ff6c23",
                                data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,24.1,20.0,18.4,19.1,17.4]
                            }
                        ]
                    };
            var options = {
                responsive: true,
                datasetStrokeWidth : 3,
                pointDotStrokeWidth : 4,
                tooltipFillColor: "rgba(0,0,0,0.8)",
                tooltipFontStyle: "bold",
                tooltipTemplate: "<%if (label){%><%=label + ' hod' %>: <%}%><%= value + '°C' %>",
                scaleLabel : "<%= Number(value).toFixed(0).replace('.', ',') + '°C'%>"
            };
            var myLineChart = new Chart(ctx).Line(data, options);
            window.postMessage('Hello there')
          }
          abc()
        </script>
        </body>
      </html>`
  }

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

  render() {
    const str = `${this.state.init}`
    return (
      <View style={styles.full}>
        <WebView
          style={styles.full}
          source={{ html: str, baseUrl: 'web/' }}
          javaScriptEnabled
          domStorageEnabled
          scalesPageToFit
          scrollEnabled={false}
          automaticallyAdjustContentInsets
          onMessage={this.onMessage}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  full: {
    flex: 1,
    backgroundColor: '#c3c3c3'
  }
})

export default WebViewGraph

Any help would be appreciated. 任何帮助，将不胜感激。

Answer 1

You need to close your script tag with a separate tag, ie <script src="..."></script> . 您需要使用单独的标签关闭script标签，即<script src="..."></script> 。 Dumb but true. 愚蠢但真实。 From there, you should start seeing errors in your JavaScript console if you have any related to your Chart.js usage. 从那里开始，如果您与Chart.js使用有关，则应该开始在JavaScript控制台中看到错误。

无法在React-Native Android WebView中渲染画布或运行脚本

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-03-29 16:39:34

无法在React-Native Android WebView中渲染画布或运行脚本

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-03-29 16:39:34

解决方案1
0 已采纳 2018-03-29 16:39:34