React Native 圓形進度條組件

XiNGRZ 發布于2019-08-21 18:37 / 2045人閱讀

摘要：演示動畫安裝方法需要手動下，用打開項目，添加到中，然后在中添加。暫時沒找到原因。完整示例完整代碼圓形進度條組件本次示例代碼在文件夾中。組件地址微信不讓跳轉外鏈，可以點擊查看原文來查看外鏈內容。

本文原創首發于公眾號：ReactNative開發圈，轉載需注明出處。

React Native 圓形進度條組件：react-native-circular-progress，圓形的進度條組件，支持動畫，支持iOS和Android。

演示動畫

安裝方法

npm i --save react-native-circular-progress

IOS需要手動Link下ReactART，用Xcode打開項目，添加ART.xcodeproj到Libraries中，然后在Link Binary With Libraries中添加libART.a。如下圖所示：

使用示例

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

 console.log("onAnimationComplete")}
  backgroundColor="#3d5875" />

API說明

size – width and height of the circle（圓形的寬度和高度）

width - thickness of the lines（圓形線的寬度）

backgroundWidth - thickness of the background 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. Use "transparent" to hide(背景線的顏色）

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

onAnimationComplete - you can pass a callback function that will be invoked when animation is complete. (see here)(動畫結束時的事件)

onLinearAnimationComplete - you can pass a callback function that will be invoked when linear animation is complete. (see here)

特別說明

在react-native 0.50.4版本中，backgroundColor設置transparent時會報錯。暫時沒找到原因。

完整示例

完整代碼：React Native 圓形進度條組件 | forrest23.github.io
本次示例代碼在 Component03文件夾中。

組件地址

GitHub - bgryszko/react-native-circular-progress: React Native component for creating animated, circular progress with ReactART

微信不讓跳轉外鏈，可以點擊查看原文來查看外鏈GitHub內容。

舉手之勞關注我的微信公眾號：ReactNative開發圈

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90641.html

使用React Native制作圓形加載條

摘要：前端常規制作進度條方法前端實現相對容易點，我們可以用去繪制圓，也可以用去繪制使用主要是用進行繪制，關于使用可以看這里。 showImg(https://segmentfault.com/img/bVCkNJ); 先放運行截圖說明做什么吧， showImg(https://segmentfault.com/img/bVCkND); react-native-percentage-circ...

xiongzenghui 2019-08-20 10:29 評論0 收藏0
React Native 常用的 15 個庫

摘要：聲明式用法只需使用動畫的名稱，該動畫將在加載該元素時立即生效。實際案例這個庫支持本地推送通知功能比較全面。實際案例具有縮放支持，回調，縮放以適應和滾動指示器支持的組件。這是圖像上傳或圖像處理的基本庫。本篇 React native 庫列表不是從網上隨便找的，這些是我在我的應用中親自使用的庫。這些庫功能可能跟其它庫也有，但經過大量研究并在我的程序中嘗試后，我選擇了這些庫。想閱讀更...

Juven 2019-08-23 16:56 評論0 收藏0
小哥哥小姐姐看過來，這里有個組件庫需要您簽收一下

摘要：如果你想減少包大小，你可以這樣引入事實上，每個組件都是支持單獨安裝的，我們也推薦你使用這種方式引入組件。以下是運行示例后各界面的截圖組件圖標右上角的圓形徽標數字。 1. 前言一直以來都想做個組件庫，一方面是對工作中常遇問題的總結，另一方面也確實能夠提升工作效率（誰又不想造一個屬于自己的輪子呢~），于是乎就有了本文的主角兒rn-components-kit。市面上web的UI組件庫如...

Alan 2019-08-26 10:47 評論0 收藏0