react native ProgressViewIOS
发布在react native2015年12月14日view:1953react-native
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

这是苹果下的进度条。官网的例子需要依赖一个react-timer-mixin,我们要通过npm安装

enter image description here

/**
 * 进度条 by 司徒正美
 */

'use strict';
var React = require('react-native');

var {
  AppRegistry,
  ProgressViewIOS,
  StyleSheet,
  View,
} = React;
var TimerMixin = require('react-timer-mixin');

var ProgressViewExample = React.createClass({
  mixins: [TimerMixin],

  getInitialState() {
    return {
      progress: 0,
    };
  },

  componentDidMount() {//当插入页时立即执行这函数
    this.updateProgress();
  },

  updateProgress() {
    var progress = this.state.progress + 0.01; //更新进度条
    this.setState({ progress });
    //利用react-timer-mixin提供的requestAnimationFrame实现动画
    this.requestAnimationFrame(() => this.updateProgress());
  },

  getProgress(offset) {//当this.state.progress发生变化时,就会执行此方法,再更新视图
    var progress = this.state.progress + offset;
    return Math.sin(progress % Math.PI) % 1;
  },

  render() {
    return (
      <View style={styles.container}>
        <ProgressViewIOS style={styles.progressView} progress={this.getProgress(0)}/>
        <ProgressViewIOS style={styles.progressView} progressTintColor="purple" progress={this.getProgress(0.2)}/>
        <ProgressViewIOS style={styles.progressView} progressTintColor="red" progress={this.getProgress(0.4)}/>
        <ProgressViewIOS style={styles.progressView} progressTintColor="orange" progress={this.getProgress(0.6)}/>
        <ProgressViewIOS style={styles.progressView} progressTintColor="yellow" progress={this.getProgress(0.8)}/>
      </View>
    );
  },
});


var styles = StyleSheet.create({
  container: {
    marginTop: -20,
    backgroundColor: 'transparent',
  },
  progressView: {
    marginTop: 20,
  }
});

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

enter image description here

评论
发表评论
暂无评论
WRITTEN BY
司徒正美
穿梭于二次元与二进制间的魔法师( ̄(工) ̄) 凸ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้
TA的新浪微博
PUBLISHED IN
react native

用于放置react native的相关文章

我的收藏