首页 » React Native » React Native技术文章 » 正文

【React Native开发】React Native控件之ProgressViewIOS进度加载组件详解及实例(41)

尊重版权,未经授权不得转载

本文来自:江清清的技术专栏(http://www.lcode.org)

(一)前言

今天我们继续来看一下ProgressViewIOS进度加载组件详解以及实例。

刚创建的React Native技术交流2群(496601483),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

该ProgressViewIOS组件渲染一个IOS平台的UIProgressView组件,进行显示加载进度信息。

(二)属性

1.View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)

2.progress number  设置进度值 (范围在0-1之间)

3.progressTintColor  string  设置进度条本身的颜色

4.progressViewStyle   enum('default','bar')  加载进度的风格   枚举类型 默认风格和Bar条类型

5.trackImage   Image.propTypes.source    设置一个可以拉伸的图片,设置进度条剩下部分进度的图片

6.trackTintColor  string   进度条的颜色(已经有进度的情况)

(三)使用实例

上面我们已经针对ProgressViewIOS进度加载组件做了详细介绍,下面我们具体来一个实例进行演示一下,具体代码如下:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  ProgressViewIOS,
} from 'react-native';

class TabBarIOSDemo extends Component {
  render() {
    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" progress={0.4}/>
        <ProgressViewIOS style={styles.progressView} progressTintColor="orange" progress={0.6}/>
        <ProgressViewIOS style={styles.progressView} progressTintColor="yellow" progress={0.8}/>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    marginTop: 20,
  },
  progressView: {
    marginTop: 20,
    marginLeft:10,
    marginRight:10,
  }
});

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

运行截图如下

 

(四)最后总结

今天我们主要讲解学习了ProgressViewIOS进度加载组件基本相关介绍和使用详解,大家有问题可以加一下群React Native技术交流2群(496601483).或者底下进行回复一下。

尊重原创,转载请注明:From Sky丶清(http://www.lcode.org/) 侵权必究!

关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)

关注我的微博,可以获得更多精彩内容