React Native拒绝使用Chart

时间:2016-12-29 10:57:59

标签: javascript android node.js react-native

我是React-Native的新手,我正在为Android开发应用。我已尝试实施图表...我从此处https://github.com/tomauty/react-native-chart安装了node_module react-native-chart ,并且我编写了以下组件,类似于使用图表的入门教程的使用部分中提供的组件。

import React, {Component, PropTypes} from 'react';
import Button from 'react-native-button';
import Chart from 'react-native-chart';
import {View,
    Picker,
    StyleSheet,
    Text,
    Navigator,
    TouchableHighlight}
    from 'react-native';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
    },
    chart: {
        width: 200,
        height: 200,
    },
});

const data = [[
    [0, 1],
    [1, 3],
    [3, 7],
    [4, 9],
]];

export default class Chart extends Component{

    constructor(){
        super()
    }

    render() {
        return (
            <View style={styles.container}>

                <Chart
                    style={styles.chart}
                    data={data}
                    verticalGridStep={5}
                    type="line"
                    showDataPoint={true}
                    color={['#e1cd00']}
                />

                <Button
                    style={{fontSize: 20, color: 'red'}}
                    styleDisabled={{color: 'red'}}
                    onPress={() => this.props.navigator.pop()}>
                    Back
                </Button>

            </View>
        )
    }

}

每当我点击应该打开图表组件的其他组件的按钮时,应用程序崩溃。如果我从render方法中删除Chart,则组件加载正常,只显示Button

我该怎么办?

1 个答案:

答案 0 :(得分:0)

应用程序崩溃,特别是在Android中,是由于缺少库文件而导致的。

  

npm install react-native-chart --save

是可以的但是这是一个使用本机组件的模块 - 而不是纯粹的js repo。

您应该manual linking或使用

  

rnpm link react-native-chart

或者

  

react-native link react-native-chart