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模式