React Native图表插件react-native-cha
2017-03-28 本文已影响3605人
冷洪林
之前写了些RN的第三方插件的教程,(比如react-native-baidu-map
iOS端集成:http://www.jianshu.com/p/eceb7e66fa5e ,RN升级配置说明
:http://www.jianshu.com/p/0c30e94de69b ) ,我觉得写博客来帮网友解决问题,比单纯的截图和QQ聊天效率更高,并且复用性高,不用再重复解答。可能很多朋友都在集成第三方的时候会遇到一些莫名其妙的报错,稀奇古怪的填坑,所以此时我们需要有极强的耐心,和清晰的思路。好了,话不多说,接下来开始一步一步集成图表插件react-native-charts-wrapper
:
成都React-Native交流群,进群给管理,先到先得哦


图表插件react-native-charts-wrapper github地址
1.新建一个新的项目,从零开始演示(ChartsTest)

当出现以下界面,就说明新建项目成功:

2.安装react-native-charts-wrapper(注意:一定要在项目根目录下进行安装):
cd到项目根目录:

在终端输入:
npm install --save react-native-charts-wrapper

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


添加完后:

4.Add Bridge File:因为后面会用到SwiftyJSON
andiOS Charts
,这是用Swift写的,所以我们需要一个桥接文件,方法如下:
新建一个工程名-Bridging-Header.h
头文件(注意,必须是工程名开头!!!):




然后:Edit ->
Convert ->
To Current Swift Syntax...


等待一会便好。。。


接下来在桥接文件里添加:
#import "React/RCTBridge.h"
#import "React/RCTViewManager.h"
#import "React/RCTUIManager.h"
#import "React/UIView+React.h"
#import "React/RCTBridgeModule.h"
#import "React/RCTEventDispatcher.h"
#import "React/RCTEventEmitter.h"
如图:

5.接下来就需要使用我前面说的SwiftyJSON
andiOS Charts
我这里已经帮大家下好了,链接地址:链接: https://pan.baidu.com/s/1hs5M1Vm 密码: q2rt
下载下拉解压后,拖到iOS项目根目录下:


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


完成后如图:

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



完成后如图:

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


完成后如图:

9.到这里配置已经完成,我们来Build一下:

ok,配置成功!
10.这里我们还是采用官方的示例代码来玩玩这个图标,看看有多🐂:
index.ios.js:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import BarChartScreen from './BarChartScreen';
export default class ChartsTest extends Component {
render() {
return (
<View style={styles.container}>
<BarChartScreen style={{width:300, height:500}} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
AppRegistry.registerComponent('ChartsTest', () => ChartsTest);
BarChartScreen.js
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
processColor
} from 'react-native';
import {BarChart} from 'react-native-charts-wrapper';
class BarChartScreen 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}}>
<Text> selected entry</Text>
<Text> {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
}
});
export default BarChartScreen;
效果如图:

早上上班到现在一直再弄这个,还是有点累的。哈哈,今天还是我生日,我是不是很敬业啊,嘿嘿嘿~
好了 不弄这些花里胡哨的了,示例程序中还有很多图表,希望能帮到大家,谢谢~