React Native图表插件react-native-charts-wrapper集成教程

最近公司项目要用到图标显示，在网上找了好多天找到react-native-charts-wrapper，这款第三方图形很全，功能也很强大，就和大家一起分享下使用心得:(iOS端)，好了，话不多说，接下来开始一步一步集成图表插件react-native-charts-wrapper：

react-native-charts-wrapper GitHub地址

1.新建一个项目

出现下面界面时，说明项目已经创建成功：

2.安装react-native-charts-wrapper （注意：一定要在根目录下安装）

进入项目根目录执行 npm install –save react-native-charts-wrapper

3.把该目录下ZylCharts/node_modules/react-native-charts-wrapper/ReactNativeCharts的整个ReactNativeCharts文件夹,拖入到项目中

拖入后：

4.Add Bridge File：因为后面会用到SwiftyJSONandiOS Charts,这是用Swift写的，所以我们需要一个桥接文件，方法如下：

新建一个工程名-Bridging-Header.h头文件(注意，必须是工程名开头！！！)：

5.接下来就需要使用我前面说的SwiftyJSONandiOS Charts

这里已经下好了，链接地址： https://pan.baidu.com/s/1o7Y3oRg 密码: 32j9

下载下拉解压后，拖到iOS项目根目录下：

6.把刚刚的两个文件夹中的SwiftyJSON.xcodeproj and Charts.xcodeproj拖到工程的libraries中：

7.接下来-> Build Phases ->Link Binary With Libraries添加SwiftyJSON.frameworkand Charts.framework.

8.添加SwiftyJSON.frameworkand Charts.framework 到 Embedded Binaries.

然后：Edit -> Convert -> To Current Swift Syntax…

完成之后点击save。

接下来在桥文件里面添加：

9.到这里配置已经完成，花键+b变一下程序：

遇到错误：
1.Command /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/swiftc failed with exit code 1
2.Command /usr/bin/ditto failed with exit code 1
原因：运行从网下下载的swift项目的时候，基本上都会出现这个错误。意思是找不到项目文件。
解决方法：直接忽略，运行程序就好。

这样就配置好了，项目中的报错也就解决了！

下面就根据react-native-charts-wrapper文档示例代码，写个柱形图。

index.ios.js:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import ZylChartScreen from './ZylChartScreen';

export default class ZylCharts extends Component {
    render() {
return (

              <ZylChartScreen />

        );
    }
}



AppRegistry.registerComponent('ZylCharts', () => ZylCharts);

ZylChartScreen.js:

/**
 * Created by zhangyanlf on 17/5/23.
 */
import React from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    processColor
} from 'react-native';

import {BarChart} from 'react-native-charts-wrapper';

class ZylBarChartScreen extends React.Component {

    constructor() {
super();

this.state = {
            legend: {
                enabled: true,
                textSize: 14,
                form: 'SQUARE',
                formSize: 14,
                xEntrySpace: 10,
                yEntrySpace: 5,
                formToTextSpace: 5,
                wordWrapEnabled: true,
                maxSizePercent: 0.5
            },
            data: {
                dataSets: [{
                    values: [{y: 100},
                            {y: 105},
                            {y: 102},
                            {y: 110},
                            {y: 114},
                            {y: 109},
                            {y: 105},
                            {y: 99},
                            {y: 95}],
                    label: 'Bar dataSet',
                    config: {
                        color: processColor('teal'),
                        barSpacePercent: 40,
                        barShadowColor: processColor('lightgrey'),
                        highlightAlpha: 90,
                        highlightColor: processColor('red'),
                    }
                }],
            },
            xAxis: {
                valueFormatter: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
                granularityEnabled: true,
                granularity : 1,
            }
        };
    }

    handleSelect(event) {
        let entry = event.nativeEvent
if (entry == null) {
this.setState({...this.state, selectedEntry: null})
        } else {
this.setState({...this.state, selectedEntry: JSON.stringify(entry)})
        }
    }


    render() {
return (
            <View style={{flex: 1}}>
                <View style={{height:80,marginTop: 15}}>

                    <Text style={styles.entryStyle}> selected entry</Text>
                    <Text style={styles.entryStyle}> {this.state.selectedEntry}</Text>
                </View>


                <View style={styles.container}>
                    <BarChart
                        style={styles.chart}
                        data={this.state.data}
                        xAxis={this.state.xAxis}
                        animation={{durationX: 2000}}
                        legend={this.state.legend}
                        gridBackgroundColor={processColor('#ffffff')}
                        drawBarShadow={false}
                        drawValueAboveBar={true}
                        drawHighlightArrow={true}
                        onSelect={this.handleSelect.bind(this)}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',

    },
    chart: {
        flex: 1
    },
    entryStyle: {
        color: 'orange',
        alignItems: 'center',
        justifyContent: 'center'
    }
});

export default ZylBarChartScreen;

效果图：

ok，就先写一个柱形图，其他的以后有时间再继续学习！！!

文章以同步到个人博客：传送门