npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@tahausmank/react-native-kline

v1.0.1

Published

React Native Kline

Downloads

10

Readme

@TahaUsmanK/react-native-kline

npm version npm downloads npm licence Platform

仓库 Android 源码来源于icechao/KlineChart. iOS 源码来源于h-js/KLine

Install

npm i --save @tahausmank/react-native-kline

Examples

To run examples:

npm i
npm start

#Android
npm run android

#iOS
cd ios/
pod install
npm run ios

Props

| 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 | | mainBackgroundColor | string | 主图背景色 | Android iOS | | 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 |

Important

Origin Repo: 472647301/react-native-kline