react-native-sf-progress

长条和圆形进度条

安装

npm install react-native-sf-progress

Props (公共)

parameter	type	required	description	default
containerStyle	object	no	内容样式，位置设置	null
trackTintColor	string	no	进度条背景颜色	'white'
progressTintColor	string	no	进度条颜色	'rgba(64,169,255,1)'
progress	number	no	进度条进度(0.0-1.0)	0
edgeInside	number	no	进度条边距	0
borderWidth	number	no	进度条边框宽度	0
borderColor	string	no	进度条边框颜色	'rgba(233,233,233,1)'
textColor	string	no	进度文字颜色	'black'
textFontSize	number	no	进度文字大小	null
textFontWeight	string	no	进度文字厚度	'bold'

Props (SFProgressBar)

parameter	type	required	description	default
width	number	yes	进度条宽度	null
height	number	yes	进度条高度	null
textWidth	number	no	进度文字宽度	50
textLightColor	string	no	进度文字在左边时的颜色	0
textComponent	bool、func	no	是否显示进度文本（或者写入组件自定义）	true,func(progress,direction,tag)

Props (SFProgressCircle)

parameter	type	required	description	default
radius	number	yes	进度条半径	null
thickness	number	no	进度条宽度	1
textComponent	bool、func	no	是否显示进度文本（或者写入组件自定义）	true,,func(progress,tag

Methods（公共）

Methods	Params	Param Types	description	Example
setProgress	progress	(float,bool)	设置进度（可带动画和不带动画）
getProgress	null	null	获取进度

例子

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    TouchableOpacity
} from 'react-native';

import {SFProgressBar,SFProgressCircle} from "react-native-sf-progress"

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    componentDidMount() {

    }
    click = () => {
        this.refs.pro1.setProgress(1.0)
        this.refs.pro2.setProgress(0.5)
        this.refs.pro3.setProgress(0.2)
        this.refs.pro4.setProgress(0.9)
    }
    clickReset = () => {
        this.refs.pro1.setProgress(0)
        this.refs.pro2.setProgress(0)
        this.refs.pro3.setProgress(0)
        this.refs.pro4.setProgress(0)
    }
    render() {

        return (
            <View style={styles.container}>
                <SFProgressBar
                    containerStyle={{
                        marginTop:30
                    }}
                    ref={"pro1"}
                    width={250}
                    height={30}
                    progress={0.0}
                    borderWidth={1}
                    borderColor={'rgba(233,233,233,1)'}
                    textWidth={80}
                    textComponent={(value,direction)=>{
                        return(
                            <Text style={{
                                color:direction=='right'?'black':'white',
                                fontSize:12,
                            }}>{parseInt(value*100)+'%'}</Text>
                        )

                    }}
                />

                <SFProgressBar
                    containerStyle={{
                        marginTop:30
                    }}
                    ref={"pro2"}
                    width={250}
                    height={30}
                    progress={0.0}
                    borderWidth={1}
                    borderColor={'rgba(233,233,233,1)'}

                />
                <SFProgressBar
                    containerStyle={{
                        marginTop:30
                    }}
                    ref={"pro3"}
                    width={250}
                    height={30}
                    progress={0.0}
                    borderWidth={1}
                    textComponent={false}
                    borderColor={'rgba(233,233,233,1)'}

                />

                <SFProgressCircle
                    containerStyle={{
                        marginTop:30
                    }}
                    ref={"pro4"}
                    radius={80}
                    thickness={15}
                    progress={0.2}
                    borderWidth={1}
                    borderColor={'rgba(64,169,255,0.2)'}

                />

                <TouchableOpacity onPress = {this.click}>
                    <View style={{
                        width:100,
                        height:40,
                        marginTop:60,
                        backgroundColor:'red',
                        alignItems:'center',
                        justifyContent:'center'
                    }}>
                        <Text style={{
                            fontSize:16,
                            color:'white'
                        }}>设置进度</Text>
                    </View>
                </TouchableOpacity>

                <TouchableOpacity onPress = {this.clickReset}>
                    <View style={{
                        width:100,
                        height:40,
                        marginTop:60,
                        backgroundColor:'red',
                        alignItems:'center',
                        justifyContent:'center'
                    }}>
                        <Text style={{
                            fontSize:16,
                            color:'white'
                        }}>重置进度</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});