https://github.com/ljunb/react-native-instrument-board
一个应用于React Native App的仪表盘组件。
https://github.com/ljunb/react-native-instrument-board
board instrument react-native
Last synced: about 2 months ago
JSON representation
一个应用于React Native App的仪表盘组件。
- Host: GitHub
- URL: https://github.com/ljunb/react-native-instrument-board
- Owner: ljunb
- License: mit
- Created: 2017-11-22T13:34:39.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-27T14:47:43.000Z (over 7 years ago)
- Last Synced: 2024-10-29T21:45:33.785Z (7 months ago)
- Topics: board, instrument, react-native
- Language: JavaScript
- Homepage:
- Size: 180 KB
- Stars: 15
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-instrument-board
[](https://www.npmjs.com/package/react-native-instrument-board)
[](https://www.npmjs.com/package/react-native-instrument-board)
[](https://github.com/ljunb/react-native-instrument-board/blob/master/LICENSE)
该组件源于公司项目，当前业务主要用于反馈买车用户的一个消费态度，工作之余就将其抽取出来了。主要还是当做一个记录，如果后续时间允许，会考虑写一篇关于做这个组件的文章，写写当时遇到的问题和一些技术点。组件依赖于`react-native-svg`，所以基本是`SVG`绘制语句的应用。目前测试情况来看，可能需要 RN >= 0.50.0 😶😶~
如果你想在项目中使用，Android 下可能需要修改项目的 support 包到 25 版本，如 `example` 中的 [gradle 文件](https://github.com/ljunb/react-native-instrument-board/blob/master/example/android/app/build.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`模式