ReactNative顶部进度条

经常看到一些app在页面加载的时候顶部都有个进度条  他们说那个页面是webView  我觉得不是webView 也可以用一用 所以就试着写了写 自己撸了一个出来

直接上代码 主要还是为了自己以后用的时候少写点 真累啊

/**
 * Created by wangqiang on 2017/7/25.
 */
import React from 'react';
import {View,StyleSheet,Image,ActivityIndicator,Text,StatusBar,Dimensions} from 'react-native';
import ProgressBar from './ProgressBar';
export default class ProgressDemo extends React.PureComponent{

    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            progress:0,
            loading:true,
            progressBar:true
        };
      }

    componentWillMount() {
        StatusBar.setNetworkActivityIndicatorVisible(true);
        StatusBar.setBarStyle('light-content')
        this.timer = setInterval(()=>{
            if(this.state.progress ==1){
                clearInterval(this.timer);
                StatusBar.setNetworkActivityIndicatorVisible(false);
            }else {
                let random = Math.random() * 0.2;
                let progress = this.state.progress + random;
                if(progress>1){
                    progress = 1;
                }
                this.setState({progress});
            }
        },200);
    }

    componentDidMount() {
        this.timers = setTimeout(()=>{
            this.setState({
                loading:false,
                progressBar:false
            })
        },3000)
    }

    render(){

          if(this.state.loading){
              return (
                  <View style={styles.container}>
                      <View style={styles.titleBar}>
                          <Text style={styles.title}>赵丽颖</Text>
                      </View>
                      {this.state.loading
                          ?  <ProgressBar
                              color='#ee82ee'
                              style={styles.progress}
                              progress={this.state.progress}
                              width={400}
                          />
                          :<View style={{height:0}}/>
                      }
                  </View>
              )
          }else {
              return(
                  <View style={styles.container}>
                      <View style={styles.titleBar}>
                          <Text style={styles.title}>赵丽颖</Text>
                      </View>
                      <View style={styles.imgView}>
                          <Image
                              resizeMode="cover"
                              source={{uri:'http://www.sinaimg.cn/dy/slidenews/3_img/2017_11/85178_416432_295268.jpg'}}
                              style={styles.img}
                          />
                      </View>
                  </View>
              )
          }


    }
}

const styles = StyleSheet.create({
    progress:{
        backgroundColor: 'transparent',
    },
    container:{
        flex:1,
        backgroundColor:'#fff',
        // justifyContent:'center',
        // alignItems:'center'
    },
    img:{
        width:Dimensions.get('window').width,
        height:Dimensions.get('window').height
    },
    titleBar:{
        height:64,
        backgroundColor:'#ffc0cb',
        justifyContent:'center',
        alignItems:'center'
    },
    imgView:{
        justifyContent:'center',
        alignItems:'center',
    },
    title:{
       color:'#fff',
        fontSize:16,
        marginTop:20
    }
});

不会上传动图 就随便截图了  自己下载下来看效果 还是不错的 首先是开始加载了 然后加载完毕 进度条消失 图片就出来了