資訊專(zhuān)欄INFORMATION COLUMN
摘要：演示動(dòng)畫(huà)安裝方法需要手動(dòng)下，用打開(kāi)項(xiàng)目，添加到中，然后在中添加。暫時(shí)沒(méi)找到原因。完整示例完整代碼圓形進(jìn)度條組件本次示例代碼在文件夾中。組件地址微信不讓跳轉(zhuǎn)外鏈，可以點(diǎn)擊查看原文來(lái)查看外鏈內(nèi)容。
本文原創(chuàng)首發(fā)于公眾號(hào)：ReactNative開(kāi)發(fā)圈，轉(zhuǎn)載需注明出處。
React Native 圓形進(jìn)度條組件：react-native-circular-progress，圓形的進(jìn)度條組件，支持動(dòng)畫(huà)，支持iOS和Android。演示動(dòng)畫(huà) 安裝方法
npm i --save react-native-circular-progress
IOS需要手動(dòng)Link下ReactART，用Xcode打開(kāi)項(xiàng)目，添加ART.xcodeproj到Libraries中，然后在Link Binary With Libraries中添加libART.a。如下圖所示：
import { AnimatedCircularProgress } from "react-native-circular-progress";
console.log("onAnimationComplete")}
backgroundColor="#3d5875" />
API說(shuō)明
size – width and height of the circle（圓形的寬度和高度）
width - thickness of the lines（圓形線(xiàn)的寬度）
backgroundWidth - thickness of the background line（背景線(xiàn)的寬度）
fill - current, percentage fill (from 0 to 100)（進(jìn)度值）
prefill - percentage fill before the animation (from 0 to 100)（預(yù)先設(shè)置的進(jìn)度值）
tintColor - color of a progress line（圓形的線(xiàn)的顏色）
backgroundColor - color of a background for progress line. Use "transparent" to hide(背景線(xiàn)的顏色）
rotation - by default, progress starts from the angle = 90?, you can change it by setting value from -360 to 360(旋轉(zhuǎn)度數(shù))
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)(動(dòng)畫(huà)結(jié)束時(shí)的事件)
onLinearAnimationComplete - you can pass a callback function that will be invoked when linear animation is complete. (see here)
特別說(shuō)明在react-native 0.50.4版本中，backgroundColor設(shè)置transparent時(shí)會(huì)報(bào)錯(cuò)。暫時(shí)沒(méi)找到原因。
完整示例完整代碼：React Native 圓形進(jìn)度條組件 | forrest23.github.io
本次示例代碼在 Component03文件夾中。
GitHub - bgryszko/react-native-circular-progress: React Native component for creating animated, circular progress with ReactART
微信不讓跳轉(zhuǎn)外鏈，可以點(diǎn)擊查看原文來(lái)查看外鏈GitHub內(nèi)容。
舉手之勞關(guān)注我的微信公眾號(hào)：ReactNative開(kāi)發(fā)圈
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90641.html
摘要：前端常規(guī)制作進(jìn)度條方法前端實(shí)現(xiàn)相對(duì)容易點(diǎn)，我們可以用去繪制圓，也可以用去繪制使用主要是用進(jìn)行繪制，關(guān)于使用可以看這里。 showImg(https://segmentfault.com/img/bVCkNJ); 先放運(yùn)行截圖說(shuō)明做什么吧， showImg(https://segmentfault.com/img/bVCkND); react-native-percentage-circ...
摘要：聲明式用法只需使用動(dòng)畫(huà)的名稱(chēng)，該動(dòng)畫(huà)將在加載該元素時(shí)立即生效。實(shí)際案例這個(gè)庫(kù)支持本地推送通知功能比較全面。實(shí)際案例具有縮放支持，回調(diào)，縮放以適應(yīng)和滾動(dòng)指示器支持的組件。這是圖像上傳或圖像處理的基本庫(kù)。 本篇 React native 庫(kù)列表不是從網(wǎng)上隨便找的， 這些是我在我的應(yīng)用中親自使用的庫(kù)。 這些庫(kù)功能可能跟其它庫(kù)也有，但經(jīng)過(guò)大量研究并在我的程序中嘗試后，我選擇了這些庫(kù)。 想閱讀更...
摘要：如果你想減少包大小，你可以這樣引入事實(shí)上，每個(gè)組件都是支持單獨(dú)安裝的，我們也推薦你使用這種方式引入組件。以下是運(yùn)行示例后各界面的截圖組件圖標(biāo)右上角的圓形徽標(biāo)數(shù)字。 1. 前言 一直以來(lái)都想做個(gè)組件庫(kù)，一方面是對(duì)工作中常遇問(wèn)題的總結(jié)，另一方面也確實(shí)能夠提升工作效率（誰(shuí)又不想造一個(gè)屬于自己的輪子呢~），于是乎就有了本文的主角兒rn-components-kit。 市面上web的UI組件庫(kù)如...
閱讀 3036·2023-04-25 20:22
閱讀 3350·2019-08-30 11:14
閱讀 2602·2019-08-29 13:03
閱讀 3191·2019-08-26 13:47
閱讀 3235·2019-08-26 10:22
閱讀 1279·2019-08-23 18:26
閱讀 628·2019-08-23 17:16
閱讀 1923·2019-08-23 17:01
