Question

我发现了同样的问题here，并决定尝试一下。虽然它没有给我像OP那样的错误，但它给了我不同的错误说

invariant violation view config not found for name div

我当前的代码与问题完全一样，我使用expo来构建这个应用程序。

我确实稍微更改了代码，下面是代码

import React, { Component } from 'react';
import { View, ScrollView } from 'react-native';
import { 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'       , '2015-01-01T08:00:00.000Z', '2015-01-05T08:00:00.000Z', null, 100, null],
                ['Write'   , 'Write Papaer'       , null, '2015-01-09T08:00:00.000Z', 259200000, 25, 'Research Outline'],
                ['Cite'    , 'Create Bibliography', null, '2015-01-07T08:00:00.000Z', 86400000, 20, 'Research'],
                ['Complete', 'Hand In Paper'      , null, '2015-01-10T08:00:00.000Z', 86400000, 0, 'Cite, Write'],
                ['Outline' , 'Outline Paper'      , null, '2015-01-06T08:00:00.000Z', 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'  },
            ],
            //rows: [],
            //column: [],
        };
    }

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

    render() {
        return (
            <View>
            <ScrollView>
                <Chart 
                    graph_id="ganttchart"
                    chartType="Gantt"
                    columns={this.state.columns}
                    rows={this.state.rows}
                    chartPackages={['gantt']}
                    width="100%" height="9999px"
                />
            </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;

由于react-google-charts存储库中的示例显示它与Reactjs一起使用，我想知道是否要将其与React-Native一起使用，这是正确的方法吗？或者我们需要等待开发人员为react-google-charts开发本机代码？这就像victory和victory-native情况一样。

感谢您的建议和帮助。

如何使用React Native渲染甘特图？

0 个答案: