仓库Android源码来源于icechao/KlineChart. iOS源码来源于h-js/KLine
npm i --save react-native-kline
iOS Settings
⬇️
import React, {Component} from 'react';
import {StyleSheet, Text, SafeAreaView} from 'react-native';
import ByronKlineChart, {
dispatchByronKline,
KLineIndicator,
CandleHollow,
} from 'react-native-kline';
import axios from 'axios';
const BaseUrl = 'http://api.zhuwenbo.cc/v1';
const WsUrl = 'ws://49.233.210.12:1998/websocket';
export default class App extends Component {
state = {
datas: [],
symbol: 'BTCUSDT',
type: 'MIN_15',
};
ws = null;
onMoreKLineData = async (params) => {
console.log(' >> onMoreKLineData :', params);
const {symbol, type} = this.state;
const res = await axios.get(
`${BaseUrl}/kline?type=${type}&symbol=${symbol}&to=${params.id}`,
);
if (!res || !res.data) {
return;
}
dispatchByronKline('add', res.data);
};
async initKlineChart() {
const {symbol, type} = this.state;
const res = await axios.get(
`${BaseUrl}/kline?type=${type}&symbol=${symbol}`,
);
if (!res || !res.data) {
return;
}
this.setState({datas: res.data});
}
subscribeKLine = (event = 'subscribe') => {
if (!this.ws) {
return;
}
const {type, symbol} = this.state;
const data = {
event: event,
data: `${type}/${symbol}`,
};
this.ws.send(JSON.stringify(data));
};
onWebSocketOpen = () => {
this.subscribeKLine();
};
onWebSocketMessage = (evt) => {
// console.log(' >> onWebSocketMessage:', evt.data);
const {type, symbol} = this.state;
const msg = JSON.parse(evt.data);
const _type = `${type}/${symbol}`;
if (!msg || msg.type !== _type || !msg.data) {
return;
}
dispatchByronKline('update', [msg.data]);
};
componentDidMount() {
this.initKlineChart();
this.ws = new WebSocket(WsUrl);
this.ws.onopen = this.onWebSocketOpen;
this.ws.onmessage = this.onWebSocketMessage;
}
render() {
return (
<SafeAreaView style={styles.container}>
<Text style={styles.welcome}>☆ByronKline example☆</Text>
<Text style={styles.instructions}>STATUS: loaded</Text>
<Text style={styles.welcome}>☆☆☆</Text>
<ByronKlineChart
style={{height: 400}}
datas={this.state.datas}
onMoreKLineData={this.onMoreKLineData}
indicators={[KLineIndicator.MainMA, KLineIndicator.VolumeShow]}
// limitTextColor={'#FF2D55'}
// mainBackgroundColor={'#ffffff'}
// candleHollow={CandleHollow.ALL_HOLLOW}
/>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
To run examples:
npm i
npm start
#Android
npm run android
#iOS
cd ios/
pod install
npm run ios
Prop | Type | Description | Platform |
---|---|---|---|
datas | Array<KLineBar> |
K线历史数据 | Android iOS |
locales | Array<string> |
多语言配置 | Android iOS |
indicators | Array<KLineIndicator> |
指标配置 | Android iOS |
onMoreKLineData | (params: KLineCallbackParams) => void |
图表请求加载更多历史数据 | Android iOS |
pricePrecision | number | 价格精度 | Android iOS |
volumePrecision | number | 数量精度 | Android iOS |
period | number | 周期 | Android iOS |
mainBackgroundColor | string | 主图背景色 | Android |
selectedXLabelBackgroundColor | string | 设置选中X轴坐标背景色 | Android |
priceLabelInLineTextColor | string | 设置价格线上的文字颜色 | Android |
priceLabelInLineTextSize | number | 设置价格线上的文字大小 | Android |
selectedLabelTextColor | string | 设置选中X坐标文字颜色 | Android |
selectedLabelTextSize | number | 设置选中X坐标文字大小 | Android |
priceLabelInLineBoxMarginRight | number | 设置价格线上价格框离右距离 | Android |
priceLabelInLineShapeWidth | number | 价格线上价格图形宽 | Android |
priceLabelInLineShapeHeight | number | 价格线上价格图形高 | Android |
priceLabelInLineBoxHeight | number | 设置价格线上价格框高度 | Android |
priceLabelInLineBoxPadding | number | 设置价格线上价格框内边距 | Android |
priceLabelInLineBoxShapeTextMargin | number | 价格线上价格文字与图形的间隔 | Android |
priceLabelInLineClickable | boolean | 设置价格线价格框可点击 | Android |
priceLabelInLineBoxBackgroundColor | string | 设置右侧价格框背景色 | Android |
priceLabelRightBackgroundColor | string | 设置价格线右侧框背景 | Android |
priceLabelInLineBoxBorderColor | string | 设置价格线右侧框边框颜色 | Android |
priceLabelInLineBoxBorderWidth | number | 设置价格线框边框宽度 | Android |
priceLabelInLineBoxRadius | number | 设置价格线上价格框圆角半径 | Android |
priceLineRightLabelBackGroundAlpha | number | 设置价格线右侧标签的背景透明度 | Android |
priceLabelRightTextColor | string | 设置价格线右侧价格文字的颜色 | Android |
priceLineRightColor | string | 设置价格线右侧的颜色 | Android |
priceLineWidth | number | 设置价格线的宽度 | Android |
priceLineColor | string | 设置价格线颜色 | Android |
priceLineDotSolidWidth | number | 价格线虚线实心宽度 | Android |
priceLineDotStrokeWidth | number | 价格线实心间隔 | Android |
selectedXLineWidth | number | 设置选择器横线宽 | Android |
selectedYLineWidth | number | 设置十字线竖线宽度 | Android |
selectedXLineColor | string | 设置十字线横线颜色 | Android |
selectedYLineColor | string | 设置十字线竖线画笔颜色 | Android |
selectedYColor | string | 选中的线的Y轴颜色 | Android |
selectedCrossBigColor | string | 设置都十字线选中点外圆颜色 | Android |
selectedCrossPointRadius | number | 设置十字线相交小圆半径 | Android |
selectedCrossPointColor | string | 设置十字线交点小圆颜色 | Android |
selectedShowCrossPoint | boolean | 设置选中时是否显示十字线的交点圆 | Android |
selectedPriceBoxBackgroundColor | string | 设置选中Y值背景色 | Android |
selectedInfoTextSize | number | 设置选择器文字大小 | Android |
selectedPriceBoxHorizontalPadding | number | 选中时价格label的横向padding | Android |
selectedPriceBoxVerticalPadding | number | 选中时价格label的纵向padding | Android |
selectedInfoBoxPadding | number | 选中信息框内边距,上下为此值*2 | Android |
selectedInfoBoxMargin | number | 选中行弹出框与边缘的距离 | Android |
selectedInfoBoxTextColor | string | 设置选择器弹出框文字颜色 | Android |
selectedInfoBoxBorderColor | string | 设置选择器弹出框边框颜色 | Android |
selectedInfoBoxBackgroundColor | string | 设置选择器背景颜色 | Android |
selectedLabelBorderWidth | number | 选中时X坐标边框线宽 | Android |
selectedLabelBorderColor | string | 选中时X坐标边框线颜色 | Android |
backgroundFillTopColor | string | 设置背景色顶部颜色 | Android |
backgroundFillBottomColor | string | 设置背景色底部颜色 | Android |
timeLineColor | string | 设置分时线颜色 | Android |
timeLineFillTopColor | string | 设置分时线填充渐变的顶部颜色 | Android |
timeLineFillBottomColor | string | 设置分时线填充渐变的底部颜色 | Android |
timeLineEndPointColor | string | 分时线呼吸灯的颜色 | Android |
timeLineEndRadius | number | 分时线呼吸灯的颜色半径 | Android |
selectedDateBoxVerticalPadding | number | 选中十字线X轴坐标连框纵向内边距 | Android |
selectedDateBoxHorizontalPadding | number | 选中十字线X轴坐标连框横向内边距 | Android |
mainLegendMarginTop | number | 设置主实图图例距离视图上边缘的距离 | Android |
legendMarginLeft | number | 设置图例距离视图左边缘的距离 | Android |
increaseColor | string | 设置涨的颜色 | Android |
decreaseColor | string | 设置跌的颜色 | Android |
betterXLabel | boolean | 设置是否自适应X左右边轴坐标的位置,默认true | Android |
labelTextSize | number | 设置坐标文字大小 | Android |
labelTextColor | string | 设置坐标轴坐标文字颜色 | Android |
yLabelAlign | boolean | 设置Y轴显示在左侧/右侧 | Android |
betterSelectedXLabel | boolean | b设置是否自适应X左右边轴坐标的位置,默认true | Android |
commonTextSize | number | 统一设置设置文字大小 | Android |
mainMarginTop | number | 设置上方padding | Android |
paddingBottom | number | 设置下方padding | Android |
childPaddingTop | number | 子视图的顶部padding | Android |
commonTextColor | string | 设置通用文字颜色 | Android |
lineWidth | number | 全局通用线宽 | Android |
candleWidth | number | 设置每根蜡烛图宽度 | Android |
candleLineWidth | number | 设置蜡烛线画笔宽(空心时的线宽) | Android |
limitTextColor | string | 设置主视图最大/最小值文字颜色 | Android |
candleHollow | CandleHollow |
蜡烛是否空心 | Android |
gridLineWidth | number | 设置背景网格线宽 | Android |
gridLineColor | string | 设置背景网格线颜色 | Android |
gridLineRows | number | 设置背景网格行数 | Android |
gridLineColumns | number | 设置背景网格列数 | Android |
macdStrokeWidth | string | macd空心时线宽 | Android |
macdIncreaseColor | string | 设置macd 上涨颜色 | Android |
macdDecreaseColor | string | 设置macd 下跌颜色 | Android |
macdWidth | number | macd柱状图宽 | Android |
difColor | string | 设置DIF颜色 | Android |
deaColor | string | 设置DEA颜色 | Android |
macdColor | string | 设置MACD颜色 | Android |
wr1Color | string | 设置WR1颜色 | Android |
wr2Color | string | 设置WR2颜色 | Android |
wr3Color | string | 设置WR3颜色 | Android |
kColor | string | 设置K颜色 | Android |
dColor | string | 设置D颜色 | Android |
jColor | string | 设置J颜色 | Android |
rsi1Color | string | 设置RSI1颜色 | Android |
rsi2Color | string | 设置RSI2颜色 | Android |
ris3Color | string | 设置RSI3颜色 | Android |
ma1Color | string | 设置MA1颜色 | Android |
ma2Color | string | 设置MA2颜色 | Android |
ma3Color | string | 设置MA3颜色 | Android |
volMa1Color | string | 设置交易量MA1颜色 | Android |
volMa2Color | string | 设置交易量MA2颜色 | Android |
volLegendColor | string | 交易量图例颜色 | Android |
volLineChartColor | string | 设置当成交量视图显示为线时的颜色 | Android |
volLegendMarginTop | number | 交易量图例距离量视图上边缘的距离 | Android |