首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在React-Native中使用google图表?

如何在React-Native中使用google图表?
EN

Stack Overflow用户
提问于 2021-09-29 20:17:28
回答 1查看 486关注 0票数 0

我正在尝试在我的react原生应用程序中使用google图表。

下面是我的代码:

代码语言:javascript
运行
复制
import React, {useState, useEffect} from 'react';
import {StyleSheet, View} from 'react-native';
import {WebView} from 'react-native-webview';
import {Chart} from 'react-google-charts';

const ChartScreen = (props: any) => {
    const ExampleChart = `
            <div className={'my-pretty-chart-container'}>
                <Chart
                    width={'500px'}
                    height={'300px'}
                    chartType="PieChart"
                    loader={<div>Loading Chart</div>}
                    data={[
                    ['Task', 'Hours per Day'],
                    ['Work', 11],
                    ['Eat', 2],
                    ['Commute', 2],
                    ['Watch TV', 2],
                    ['Sleep', 7],
                    ]}
                    options={{
                    title: 'My Daily Activities',
                    }}
                    rootProps={{ 'data-testid': '1' }}
                />
            </div>`;

    return (
        <View style={styles.container}>
            <WebView source={{html: ExampleChart}} style={styles.webStyle} />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    webStyle: {
        marginTop: 20,
        height: 500,
        width: 320,
        flex: 1,
    },
});

export default ChartScreen;

我使用react-native-webview来显示来自react-google-charts的图表。

但是图表不会出现在屏幕上,我不知道我做错了什么..!

EN

回答 1

Stack Overflow用户

发布于 2021-09-29 22:34:41

不能将JSX作为字符串直接传递到WebView中。在传递给WebView之前,您需要呈现ReactJS元素,如下所示:

代码语言:javascript
运行
复制
import { renderToString } from 'react-dom/server'
import { WebView } from 'react-native-webview';
import ExampleChart from './path-to-component';

<WebView source={{ html: renderToString(<ExampleChart />) }}></WebView>;

我没有测试它,但从理论上讲,它应该可以工作。

有关ReactDOMServer的更多信息。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69382861

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档