封装进度条组件 YRLoading;

封装Redux state通信框架
封装axios网络框架
封装fetch框架

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
+    "prop-types": "^15.7.2",
     "react": "16.8.3",
     "react-native": "0.59.9",
     "react-native-gesture-handler": "^1.3.0",

readme.md

@@ -7,9 +7,7 @@
 - redux-thunk
 - redux-logger
 
-
-react-native-tab-navigator
-
+- npm install --save prop-types
 
 
 ## 项目目录

units/components/common/YRActivityIndicator.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Loading, EasyLoading } from './YRLoading';
+import {
+    AppRegistry,
+    StyleSheet,
+    Text,
+    View,
+    ActivityIndicator,
+    TouchableOpacity
+} from 'react-native';
+
+
+class YRActivityIndicator extends React.Component{
+    constructor(props){
+        super(props);
+        this.state = {// 初始设为显示加载动画
+            animating: true,
+        };
+    }
+
+    showOrHide() {
+        EasyLoading.show('Loading...');
+         // setTimeout(()=>{
+         //     EasyLoading.dismis();
+         //         },11000);
+        if (this.state.animating) {
+            this.setState({
+                animating: false
+            });
+        } else {
+            this.setState({
+                animating: true
+            });
+        }
+    }
+
+    dissLoading() {
+        EasyLoading.dismis()
+    }
+
+    componentDidMount() {
+
+    }
+
+
+    render(){
+        return ( <View style={styles.container}>
+            {/* 切换显示或隐藏的按钮 */}
+            <TouchableOpacity underlayColor="#fff" style={styles.btn} onPress={
+                this.showOrHide.bind(this)}>
+                <Text style={{color:'#fff', fontSize: 20}}>显示/隐藏</Text>
+            </TouchableOpacity>
+
+
+            <TouchableOpacity underlayColor="#fff" style={styles.btn} onPress={
+                this.dissLoading.bind(this)}>
+                <Text style={{color:'#fff', fontSize: 20}}>关闭</Text>
+            </TouchableOpacity>
+
+            {/* 小号的指示器 */}
+            <ActivityIndicator
+                animating={this.state.animating}
+
+                size="small" />
+            {/* 大号的指示器 */}
+            <ActivityIndicator
+                animating={this.state.animating}
+                style={[styles.centering, {height: 80}]}
+                size="large" />
+
+            <Loading />
+        </View>)
+
+    }
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#F5FCFF',
+    },
+    centering: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 8,
+    },
+    btn:{
+        marginTop:10,
+        width:150,
+        height:35,
+        backgroundColor:'#3BC1FF',
+        justifyContent:'center',
+        alignItems:'center',
+        borderRadius:4,
+    },
+});
+export  default YRActivityIndicator;

units/components/common/YRLoading.js

@@ -0,0 +1,102 @@
+/**
+ * Created by Arison on 2019/8/14.
+ */
+'use strict'
+import React from 'react';
+import PropTypes from 'prop-types'
+import { StyleSheet, Dimensions, Text, View, Modal, ActivityIndicator } from 'react-native';
+
+const SCREEN_WIDTH = Dimensions.get('window').width;
+const SCREEN_HEIGHT = Dimensions.get('window').height;
+
+
+
+
+export class EasyLoading {
+    constructor() {
+    }
+    static bind(loading, key = 'default') {
+        loading && (this.map[key] = loading);
+    }
+    static unBind(key = 'default') {
+        this.map[key] = null
+        delete this.map[key];
+    }
+    static show(text = 'Loading...', timeout = -1, key = 'default') {
+        this.map[key] && this.map[key].setState({ "isShow": true, "text": text, "timeout": timeout });
+    }
+    static dismis(text = 'Loading...', key = 'default') {
+        this.map[key] && this.map[key].setState({ text: text, isShow: false });
+    }
+}
+
+EasyLoading.map = {};
+
+
+
+export class Loading extends React.Component {
+
+    static propTypes = {
+        type: PropTypes.string,
+        color: PropTypes.string,
+        textStyle: PropTypes.any,
+        loadingStyle: PropTypes.any,
+    };
+
+    constructor(props) {
+        super(props);
+        let handle = 0;
+        this.state = {
+            isShow: false,
+            timeout: -1,
+            text: "Loading..."
+        }
+        EasyLoading.bind(this, this.props.type || 'default');
+    }
+    componentWillUnmount() {
+        clearTimeout(this.handle);
+        EasyLoading.unBind(this.props.type || 'default');
+    }
+    render() {
+        clearTimeout(this.handle);
+        (this.state.timeout != -1) && (this.handle = setTimeout(() => {
+            EasyLoading.dismis(this.props.type || 'default');
+        }, this.state.timeout));
+        return (
+            <Modal
+                animationType={"fade"}
+                transparent={true}
+                visible={this.state.isShow}
+                onRequestClose={() => {this.setState({
+                    isShow:false
+                }) } }>
+                <View style={[styles.load_box, this.props.loadingStyle]}>
+                    <ActivityIndicator animating={true} color={this.props.color || '#FFF'} size={'large'} style={styles.load_progress} />
+                    <Text style={[styles.load_text, this.props.textStyle]}>{this.state.text}</Text>
+                </View>
+            </Modal>
+        );
+    }
+}
+
+
+const styles = StyleSheet.create({
+    load_box: {
+        width: 100,
+        height: 100,
+        backgroundColor: '#0008',
+        alignItems: 'center',
+        marginLeft: SCREEN_WIDTH / 2 - 50,
+        marginTop: SCREEN_HEIGHT / 2 - 50,
+        borderRadius: 10
+    },
+    load_progress: {
+        position: 'absolute',
+        width: 100,
+        height: 90
+    },
+    load_text: {
+        marginTop: 70,
+        color: '#FFF',
+    }
+});

units/components/pages/HomeScreen.js

@@ -1,11 +1,18 @@
 import React from "react";
 import {connect} from 'react-redux'
-import {View, Text, Button,TouchableHighlight,StyleSheet} from "react-native";
+import {Platform,StatusBar,View, Text, Button,TouchableHighlight,StyleSheet} from "react-native";
 import {changeBtnText} from "../../actions/bi/index";
 import YRHttpRequest from  "../../utils/network/fetch"
 import {API} from "../../utils/network/axios/api.config";
 
 class HomeScreen extends React.Component {
+    static navigationOptions = {
+        title: '主页面',
+        headerStyle: Platform.OS === 'android' ? {
+            paddingTop: StatusBar.currentHeight,
+            height: StatusBar.currentHeight + 56,
+        } : {}
+    }
 
     loadData=()=>{
         //fetch请求
@@ -37,7 +44,12 @@ class HomeScreen extends React.Component {
                         navigation.navigate('Details', {name: '动态的'});
                     }}
                 />
-
+                <Button
+                    title="异步进度条"
+                    onPress={() => {
+                        navigation.navigate('YRActivityIndicator', {name: '进度条'});
+                    }}
+                />
                 <Text style={{marginBottom: 10}}>{this.props.btnText}</Text>
                 <Button title="更新文字"
                         onPress={() => {

units/containers/AppContainer.js

@@ -1,13 +1,18 @@
 import { createStackNavigator, createAppContainer } from "react-navigation";
 import HomeScreen from "../components/pages/HomeScreen";
 import {DetailsScreen} from "../components/pages/DetailsScreen";
-
+import {Platform,StatusBar} from "react-native";
+import YRActivityIndicator from "../components/common/YRActivityIndicator";
 export const AppNavigator = createStackNavigator({
     Home: {
         screen: HomeScreen,
-        navigationOptions: {//在这里定义每个页面的导航属性，静态配置
+        navigationOptions: {
             title: "首页",
-            headerBackTitle:'返回主界面',//设置返回此页面的返回按钮文案，有长度限制
+            headerBackTitle:'返回主界面',
+            headerStyle: Platform.OS === 'android' ? {
+                paddingTop: StatusBar.currentHeight,
+                height: StatusBar.currentHeight + 56,
+            } : {}
         }
     },
     Details:{
@@ -15,7 +20,14 @@ export const AppNavigator = createStackNavigator({
         navigationOptions : {
             title: '详情',
             headerBackTitle:'返回',//设置返回此页面的返回按钮文案，有长度限制
+            headerStyle: Platform.OS === 'android' ? {
+                paddingTop: StatusBar.currentHeight,
+                height: StatusBar.currentHeight + 56,
+            } : {}
         }
+    },
+    YRActivityIndicator:{
+        screen:YRActivityIndicator
     }
 }, {
     initialRouteName: 'Home',