React Native的Highcharts组织结构图（组织结构图）

Question

我正在尝试在React Native应用程序中实现Highcharts组织结构图，但是找不到一个完美的入门教程。我尝试了Highcharts React Native包装器，但是它抛出错误。如果有人可以找到与最新的react native和expo版本兼容的完美教程，这将提供大量信息。

Answer 1

我也遇到了错误，但是我设法在react-native-highcharts库中修复了它们。这是因为该库将webview用作来自已弃用的核心react native的组件。

npmjs.com guide on highcharts

按照指南的说明安装并实施所有程序之后，通过运行以下命令再安装一个软件包

npm install --save react-native-webview

此后，转到node_modules> react-native-highcharts> react-native-highcharts.js

在这里，一开始就找到import语句，并从'react-native'中删除WebView import，然后在其后添加以下行。

import WebView from 'react-native-webview';

现在，转到render方法，在WebView元素上，您将找到一个名为'onLayout = {this.reRenderWebView}'的道具，如下所示：

return (
        <View style={this.props.style}>
            <WebView
                onLayout={this.reRenderWebView}
                style={styles.full}
                source={{ html: concatHTML, baseUrl: 'web/' }}
                javaScriptEnabled={true}
                domStorageEnabled={true}
                scalesPageToFit={true}
                scrollEnabled={false}
                automaticallyAdjustContentInsets={true}
                {...this.props}
            />
        </View>

更改为

return (
        <View style={this.props.style}>
            <WebView
                onLayout={this.reRenderWebView.bind(this)}
                style={styles.full}
                source={{ html: concatHTML, baseUrl: 'web/' }}
                javaScriptEnabled={true}
                domStorageEnabled={true}
                scalesPageToFit={true}
                scrollEnabled={false}
                automaticallyAdjustContentInsets={true}
                {...this.props}
            />
        </View>

现在再次运行您的应用，看看您是否仍然遇到任何错误。希望它能解决您的问题