0.0.4 • Published 2 months ago
react-native-instrument-board v0.0.4
react-native-instrument-board
该组件源于公司项目，当前业务主要用于反馈买车用户的一个消费态度，工作之余就将其抽取出来了。主要还是当做一个记录，如果后续时间允许，会考虑写一篇关于做这个组件的文章，写写当时遇到的问题和一些技术点。组件依赖于react-native-svg，所以基本是SVG绘制语句的应用。目前测试情况来看，可能需要 RN >= 0.50.0 😶😶~
如果你想在项目中使用，Android 下可能需要修改项目的 support 包到 25 版本，如 example 中的 gradle 文件 所示。
示例效果
安装
使用npm：
npm install react-native-instrument-board --save用yarn：
yarn add react-native-instrument-board 安装后，需要执行以下命令：
react-native link react-native-svg运行example
进入项目根目录
cd example
npm install
react-native run-ios/run-android参数
| 名称 | 类型 | 默认值 | 参数描述 |
|---|---|---|---|
| percentage | number | 80 | 进度百分比，内圈红色部分，范围0-100 |
| radius | number | 150 | 仪表盘半径，注意是外圈半径 |
| strokeWidth | number | 8 | 仪表盘边框宽度 |
| startAngle | number | 36 | 仪表盘0°位置的角度，以经过仪表盘圆点的垂直线作为基准，顺时针方向的角度 |
| contentStrokeColors | array | 颜色数组 | 仪表盘每个区间的边框颜色，与区间个数对应，数组格式 |
| degreeTexts | array | '0', '1.0', '2.0', '3.0', '4.0' | 仪表盘刻度值数组 |
| degreeTextRadius | number | 118 | 仪表盘刻度值的半径，决定了刻度值的显示位置 |
| degreeTextStartOffset | array | '4%', '0', '0', '0' | 用于调整仪表盘刻度值偏移量的数组 |
| degreeTextColor | string | '#999' | 刻度值文本颜色 |
| contentTexts | array | '精打细算', '理想消费', '不差钱', '有的是钱' | 仪表盘分段内容的数组 |
| contentTextRadius | number | 120 | 类似于degreeTextRadius仪表盘分段内容的半径，决定了内容区的显示位置 |
| contentTextStartOffset | array | '28%', '28%', '35%', '28%' | 类似于degreeTextStartOffset，用于调整内容区文本的偏移量 |
| contentTextColor | string | '#999' | 仪表盘分段内容的文本颜色 |
| progressRadius | number | 110 | 进度条半径 |
| progressBackgroundColor | string | '#ccc' | 进度条背景颜色 |
| progressRadius | string | 'rgb(234, 0, 22)' | 进度条指示颜色 |
| needleRadius | number | 80 | 仪表盘指针半径，指圆心至针尖之间长度 |
| needleAngle | number | 60 | 仪表盘指针角度，指针在中心圆边缘上所占的扇形角度 |
| centerSpotRadius | number | 16 | 仪表盘中心圆半径 |
| animated | bool | true | 是否开启动画，暂时只有Animated.spring模式 |