ReactNative: 使用進度條組件ProgressViewIOS組件

一、簡介

進度條顯示在應用中很常用的一個功能，合理地使用好它能更好地提高產品的用戶體驗。進度條被運用的場景常見的有頁面加載進度、數據下載進度、上傳數據的進度等等。在ReactNative中提供了ProgressViewIOS組件來顯示矩形進度條，該組件只能使用在iOS平台上，不能跨平台。

 

二、API

ProgressViewIOS組件提供的API比較簡單，都是些常用的屬性，示例如下：

//進度條類型，有兩種，分別是默認類型default 和 bar類型
//default顯示進度條本身的顏色，bar不顯示進度條本身的顏色
progressViewStyle: PropTypes.oneOf(['default', 'bar']),

//進度條的值，從0到1
progress: PropTypes.number,

//進度條本身的顏色
progressTintColor: PropTypes.string,

//進度條軌道的色調顏色
trackTintColor: PropTypes.string,

//給進度條本身設置可拉伸的圖片
progressImage: Image.propTypes.source,

//給進度條軌道設置可拉伸的圖片
trackImage: Image.propTypes.source, 

組件內部確定進度條的高度為2像素，如下所示：

//默認高度
var styles = StyleSheet.create({
    progressView: {
        height: 2,
    },
});

  

三、使用

屬性簡單易懂，現在簡單使用一下，示例如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';

import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    ProgressViewIOS
} from 'react-native';


export default class ReactNativeDemo extends Component {

    render() {
        return (
            <View style={[styles.flex,styles.bgColor,styles.center]}>
                <View style={{marginTop: 80}}>
                    <Text>default</Text>
                    <ProgressViewIOS
                        style={{width:300}}
                        progressViewStyle='default'
                        progress={0.3}
                    />
                </View>
                <View style={{marginTop: 100}}>
                    <Text>bar 底色不可見</Text>
                    <ProgressViewIOS
                        style={{width:300}}
                        progressViewStyle='bar'
                        progress={0.3}
                    />
                </View>
                <View  style={{marginTop: 120}}>
                    <Text>default 設置底色和軌道色</Text>
                    <ProgressViewIOS
                        style={{width:300}}
                        progressViewStyle='default'
                        progress={0.3}
                        progressTintColor='red'
                        trackTintColor='green'
                    />
                </View>
                <View  style={{marginTop: 140}}>
                    <Text>default 設置底圖片和軌道圖片</Text>
                    <ProgressViewIOS
                        style={{width:300}}
                        progressViewStyle='default'
                        progress={0.3}
                        progressImage={require('./image/flower3.png')}
                        trackImage={require('./image/flower1.png')}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1
    },
    bgColor: {
      backgroundColor: 'white'
    },
    center: {
        alignItems: 'center',
        //justifyContent: 'center',
    }
});

AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);