How to render gantt chart using react-google-chart

问题:

This my current version of packages

react-google-charts 1.5.5
react 16.0.0-beta.5
react-native https://github.com/expo/react-native/archive/sdk-22.0.1.tar.gz

Now I am trying to render a Gantt Chart (example can be found here and here)

Below are my current code

import React, { Component } from 'react';
import { View, ScrollView, Text } from 'react-native';
import { Card, Avatar } from 'react-native-elements';
import { Chart } from 'react-google-charts';

class ScheduleScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            rows: [
                ['Research', 'Find sources', new Date(2015, 1, 1, 8, 0, 0), new Date(2015, 1, 5, 8, 0, 0), null, 100, null],
                ['Write', 'Write paper', null, new Date(2015, 1, 9, 12, 0, 0), 259200000, 25, 'Research,Outline'],
                ['Cite', 'Create bibliography', null, new Date(2015, 1, 7, 8, 0, 0), 86400000, 20, 'Research'],
                ['Complete', 'Hand in paper', null, new Date(2015, 1, 10, 8, 0, 0), 86400000, 0, 'Cite,Write'],
                ['Outline', 'Outline paper', null, new Date(2015, 1, 6, 8, 0, 0), 86400000, 100, 'Research'],
        ],

            columns: [
                {
                    id: 'Task ID',
                    type: 'string',
                },
                {
                    id: 'Task Name',
                    type: 'string',
                },
                {
                    id: 'Start Date',
                    type: 'date',
                },
                {
                    id: 'End Date',
                    type: 'date',
                },
                {
                    id: 'Duration',
                    type: 'number',
                },
                {
                    id: 'Percent Complete',
                    type: 'number',
                },
                {
                    id: 'Dependencies',
                    type: 'string',
                },
            ],
        };
    }

    onButtonPressClose = () => {
        this.props.navigation.navigate('Home');
    }

    render() {
        return (
            <View>
            <ScrollView>
                <Card title="Schedule">
                    <Chart
                        graph_id="ganttchart"
                        chartType="Gantt"
                        columns={this.state.columns}
                        rows={this.state.rows}
                        chartPackages={['gantt']}
                        width="100%" height="9999px"
                    />
                </Card>
            </ScrollView>
            <View style={styles.buttonBackContainer}>
            <Avatar
                medium
                rounded
                backgroundColor="#66ff33"
                icon={{ name: 'chevron-left' }}
                onPress={this.onButtonPressClose}
            />
            </View>
            </View>
        );
    }
}

const styles = {
    buttonBackContainer: {
        position: 'absolute',
        top: 20,
        left: 20,
        right: 20,
        flexDirection: 'row',
        justifyContent: 'flex-start'
    }
};

export default ScheduleScreen;

I encountered an error whenever I started the app

Error

Body:
{"message":"TransformError: 
/Users/ling/workspace/chartapp/node_modules/react-google-
charts/lib/index.js:
[BABEL]/Users/ling/workspace/chartapp/node_modules/react-google-
charts/lib/index.js:Unknown 
option:/Users/ling/workspace/chartapp/node_modules/react-google-
charts/react/react.js.Children.Check out http://babeljs.io/docs/usage/options/
for more informations about options. \n\nA common cause of this error is the presence of a configuration options object without the corresponding preset name.
Example: \n\nInvalid: \n `presets: [{option: value}]}....

How should I troubleshoot this error? I don't see any lint error when writing the code.

Thank you for your help and suggestion.

回答1:

The error message you posted keeps referencing errors in react-google-charts.

I don't think it supports react-native, only react. I found this issue on there github where someone seems to have had the same issue, will this work with react native?. Also the react-google-charts npm page makes no mention of react-native. Maybe have a look at this question to find an alternative library.