ProgressView 进度条 >=v1.0.0

渲染一个进度条

ProgressView

属性

progress { number }

当前的进度值（0到1之间）。

progressImage { Image.propTypes.source }

一个可以拉伸的图片，用于显示进度条。

progressTintColor { string }

进度条本身染上的颜色。

progressViewStyle { enum('default', 'bar') }

进度条的样式。

trackImage { Image.propTypes.source }

一个可拉伸的图片，用于显示进度条后面的轨道。

trackTintColor { string }

进度条轨道染上的颜色。

示例

import React, {Component, StyleSheet, View, Text, ProgressView} from 'qunar-react-native'
import TimerMixin from 'react-timer-mixin'

const ProgressViewExampleItem = React.createClass({
    mixins: [TimerMixin],

    getInitialState() {
        return {progress: 0};
    },

    componentDidMount() {
        this.updateProgress();
    },

    render() {
        return (
            <ProgressView progress={this.getProgress(0)} {...this.props}/>
        )
    },

    getProgress(offset) {
        var progress = this.state.progress + offset;
        return Math.sin(progress % Math.PI) % 1;
    },

    updateProgress() {
        var progress = this.state.progress + 0.01;
        this.setState({progress});
        this.requestAnimationFrame(() => this.updateProgress());
    },
})

module.exports = {
    title: 'ProgressView',
    examples: [{
        subtitle: 'Default settings',
        render: () => {
            return <ProgressViewExampleItem/>
        }
    }, {
        subtitle: 'trackTintColor: "orange", progressTintColor: "green"',
        render: () => {
            return <ProgressViewExampleItem
                trackTintColor="orange"
                progressTintColor="green"
            />
        }
    }, {
        subtitle: 'use trackImage and progressImage',
        render: () => {
            return <ProgressViewExampleItem
                trackImage={{uri: require('QImageSet').track}}
                progressImage={{uri: require('QImageSet').progress}}
            />
        }
    }]
};