ProgressView

使用ProgressView来渲染一个UIProgressView。

截图

属性

例子

'use strict';

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

import ProgressView from '../ProgressView';


class AwesomeProject extends Component {
  constructor(props){
      super(props);
      this.state = {
      progress: 0,
      indeterminate: false
      }
  }
  componentDidMount() {
    this.animate();
  }
  animate() {
   let progress = 0;
   this.setState({ progress });
   setTimeout(() =
>
 {
     this.setState({ indeterminate: false });
     setInterval(() =
>
 {
       progress += Math.random() / 5;
       if (progress 
>
 1) {
         progress = 0;
       }
       this.setState({ progress });
     }, 500);
   }, 0);
 }
  render() {
    return (

<
View style={styles.container}
>
<
Text style={styles.instructions}
>

          progressView indeterminate false

<
/Text
>
<
ProgressView
          style={styles.progress}
          progress={this.state.progress}
          indeterminate={this.state.indeterminate}
          borderWidth={0}
          borderRadius = {0}
          height = {3}
          unfilledColor={'#B2B2B2'}
          color={'#780477'}


        /
>
<
Text style={styles.instructions}
>

          progressView indeterminate true

<
/Text
>
<
ProgressView
          style={styles.progress}
          progress={0.3}
          indeterminate={true}
          borderWidth={0}
          borderRadius = {0}
          height = {3}
          unfilledColor={'#B2B2B2'}
          color={'#0C76F6'}
        /
>
<
/View
>

    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  fillStyle:{
    backgroundColor:'red'

  },
  progress:{
    margin:10

  },
  progressView: {
    marginTop: 20,
    width:200
  },
  button: {
   marginBottom: 10,
   fontWeight: '500',
   backgroundColor:'red'
 }
});

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