React Native控件之ProgressViewIOS进度条组件讲解

（一）前言

前一篇文章讲解了ProgressViewAndroid进度条加载，这篇文章来介绍一下iOS平台上的进度加载组件。ProgressViewIOS组件是基于iOS平台的UIProgressView组件。

（二）属性

名称 value 功能作用 progress number 0-1 之间的值 progressTintColor string 设置进度条已记载进度的颜色，default为蓝色 progressViewStyle enum(‘default’,’bar’) 加载进度的风格，枚举类型，默认风格与Bar条类型 trackImage Image.propTypes.source 设置一个可以拉伸的照片，设置进度条剩下部分进度的照片 trackTintColor string 进度条本身的颜色，即加载轨道颜色

（三）具体效果

var PerfectProject = React.createClass({   render: function(){       return (         <View>           <Text style={styles.welcome}>ProgressViewIOS使用实例</Text>           <ProgressViewIOS style={styles.progressView} progress={0.3}/>           <ProgressViewIOS style={styles.progressView} progressTintColor="purple" progress={0.2}/>           <ProgressViewIOS style={styles.progressView} progressTintColor='red' trackTintColor='black' progress={0.4}/>           <ProgressViewIOS style={styles.progressView} progressTintColor="orange" progress={0.6}/>           <ProgressViewIOS style={styles.progressView} progressTintColor="yellow" progress={0.8}/>           <ProgressViewIOS style={styles.progressView} progressTintColor='red' progressViewStyle='bar' progress={0.5}/>         </View>       );   },});const styles = StyleSheet.create({    welcome: {     fontSize: 20,     textAlign: 'center',     marginTop: 20,    },    progressView: {     marginTop: 20,     marginLeft:10,     marginRight:10,    }  });

运行效果如下：