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,
    },
});