React-Native-CircularProgress
Một thành phần hoàn toàn dành riêng cho React Native để tạo thanh tiến trình tròn cho iOS.
Demo
Cài đặt
. Cài đặt thư viện npm i --save react-native-progress-circular
. Bao gồm trong dự án của bạn var CircularProgressDisplay = require('react-native-progress-circular');
Vấn đề
Kể từ phiên bản react-native 0.17:
Do react-native chưa hỗ trợ các thuộc tính bán kính góc riêng lẻ trên android, nên sự hỗ trợ còn hạn chế.
Sử dụng Cơ bản
'use strict';
var React = require('react-native');
var CircularProgressDisplay = require('react-native-progress-circular');
var {View, Text} = React;
module.exports = React.createClass({
getInitialState(){
return { progress:0};
},
componentDidMount(){
// automatically increment the progress
var time = 150;
var count = 0;
setInterval(() => {
if (++count < 15){
return;
}
var progress = this.state.progress + Math.round((Math.random() * 4));
if (progress >100) {
progress = 0;
count = 0;
}
this.setState({progress: progress});
}, time);
},
render() {
var progress = this.state.progress;
// displayed inside of the component
var innerDisplay = (
<View style={{width: 200, height: 200, flex:1, justifyContent: 'center',
alignItems: 'center', backgroundColor: '#036282'}}>
<Text style={{fontSize: 30}}>{progress + "%"}</Text>
</View>
);
return (<View style={{backgroundColor: 'orange',flex:1, flexDirection: 'row'}}>
<View style={{ flex: 1, top:200, left: 20}}>
<CircularProgressDisplay.Hollow size={200}
progressBarWidth={20} outlineWidth={0} outlineColor={'black'}
backgroundColor={'orange'} progressBarColor={'#02BAF7'}
innerComponent={innerDisplay} rotate={((progress/100)*360)}/>
</View>
</View>);
}
});
Thuộc tính Thanh tiến trình rỗng
**size**
(Số:ReactComponent) – Kích thước của thành phần. Chiều cao và chiều rộng của thành phần kết quả là bằng nhau**progressBarWidth**
(Số nguyên) – Độ rộng của thanh tiến trình tròn.**progressBarColor**
(Chuỗi) – Màu của thanh tiến trình.**backgroundColor**
(Chuỗi) – Màu của phần trung tâm của thành phần và khu vực tiến trình bằng không.**outlineWidth**
(Số nguyên) – Nếu thuộc tính này tồn tại, thành phần kết quả sẽ có đường viền tròn với độ rộng này.**outlineColor**
(Chuỗi) – Màu của đường viền bao quanh thành phần.**rotate**
(Số nguyên) – Tiến trình hiện tại để theo dõi được chỉ định bằng độ. Ví dụ: 270. Có thể chấp nhận giá trị từ 0 đến 360, bao gồm cả.**innerComponent**
(ReactComponent) – Một thành phần để hiển thị bên trong thanh tiến trình tròn trống. Có thể sử dụng để hiển thị thanh tiến trình bên trong hoặc theo dõi tiến trình hiện tại với một thành phần<Text>
.
Thuộc tính Thanh tiến trình đã điền
**size**
(Số:ReactComponent) – Kích thước của thành phần. Chiều cao và chiều rộng của thành phần kết quả là bằng nhau**rotate**
(Số nguyên) – Tiến trình hiện tại để theo dõi được chỉ định bằng độ. Ví dụ: 270. Có thể chấp nhận giá trị từ 0 đến 360, bao gồm cả.**backgroundColor**
(Chuỗi) – Màu của phần trung tâm của thành phần và khu vực tiến trình bằng không. Đây là màu của thành phần khi chưa có tiến trình nào được thực hiện.**progressBarColor**
(Chuỗi) – Màu của thanh tiến trình. Đây là màu khi đã có tiến trình được thực hiện.
Chi tiết tải về:
Tác giả: andy9775
Nguồn: https://github.com/andy9775/React-Native-CircularProgress
Giấy phép: MIT license
Cảm ơn bạn!