React Native iOS 独有组件之 ProgressV

使用ProgressViewIOS来在iOS上渲染一个UIProgressView。

属性

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

实例

1. 示例代码

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

export default class App extends Component { 
  render() { 
    return (
      <View style={styles.container}>
        <Text style={styles.textStyle}>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='yellow'
          progressViewStyle = 'bar'
          progress={0.6} />
        
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  textStyle: {
    fontSize: 20,
    textAlign: 'center',
    marginTop:60
  },
  progressView: {
    margin:20
  }
  
})

2. 效果图

progressIos.jpg