@2hats/react-native-circular-progress 中文文档教程

Question

[]()

react-native-circular-progress

React Native 组件，用于使用 ReactART 创建动画循环进度。 例如用于显示用户点数。 适用于 iOS 和 Android。

---

寻找圆形滑块？看看我的其他组件 – react-native-circular-slider :alarm_clock:

---

Example app

Installation

1. Install library npm i --save react-native-circular-progress
2. Link ART library to your ReactNative project (how to link a library?). You'll find ReactART library in node_modules/react-native/Libraries/ART/ART.xcodeproj

Usage

导入 CircularProgress 或 AnimatedCircularProgress。

import { AnimatedCircularProgress } from 'react-native-circular-progress';

使用如下：

<AnimatedCircularProgress
  size={120}
  width={15}
  fill={100}
  tintColor="#00e0ff"
  backgroundColor="#3d5875" />

您还可以定义一个函数，该函数将接收当前进度并将其显示在圆圈内：

<AnimatedCircularProgress
  size={200}
  width={3}
  fill={this.state.fill}
  tintColor="#00e0ff"
  backgroundColor="#3d5875">
  {
    (fill) => (
      <Text style={styles.points}>
        { this.state.fill }
      </Text>
    )
  }
</AnimatedCircularProgress>

最后，您可以通过在组件上放置一个 ref 并调用 performLinearAnimation(toValue, duration) 函数如下：

<AnimatedCircularProgress
  ref='circularProgress'
  ...
/>

this.refs.circularProgress.performLinearAnimation(100, 8000); // Will fill the progress bar linearly in 8 seconds

Configuration

您可以通过以下道具配置传递：

• size – width and height of the circle
• width - thickness of the line
• fill - current, percentage fill (from 0 to 100)
• prefill - percentage fill before the animation (from 0 to 100)
• tintColor - color of a progress line
• backgroundColor - color of a background for progress line
• rotation - by default, progress starts from the angle = 90⦝, you can change it by setting value from -360 to 360
• tension - the tension value for the spring animation (see here)
• friction - the friction value for the spring animation (see here)
• linecap - the shape to be used at the ends of the circle. Possible values: butt (default), round or square. (see here)
• children(fill) - you can pass function as a child to receive current fill

Working example app

您可以在该存储库的 example 目录中找到工作示例。 您可以通过以下方式运行它：

iOS

git clone https://github.com/bgryszko/react-native-circular-progress.git
cd  react-native-circular-progress/example/ProgressChart
npm install
open ios/ProgressChart.xcodeproj

XCode 将打开。 单击“运行”按钮即可。

Android

打开您的模拟器并运行：

git clone https://github.com/bgryszko/react-native-circular-progress.git
cd  react-native-circular-progress/example/ProgressChart
npm install
react-native run-android

Author

Bartosz Gryszko (b@gryszko.com)

对于新组件和更新在 twitter 上关注我。

License

MIT

Special thanks

特别感谢 Chalk+Chisel 创造了人们成长的工作环境。 该组件是为我们正在进行的项目之一创建的。