NetWorkView.js 2.65 KB
'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    Text,
    Image,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    Platform,
} from 'react-native';

import LoadingIndicator from '../../../common/components/LoadingIndicator';

export default class NetWorkView extends Component {
    constructor(props) {
        super(props);
        this.state = {showWait: false};
    }

    render() {
        let isShowLoading = this.props.showWait;
        return (
            <View style={styles.container}>
                <Image
                    style={styles.icon}
                    source={require('../../images/loadingicon.png')}
                />
                <Text
                    style={styles.desc}
                >
                    您手机的网络不太顺畅哦!
                </Text>
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={() =>{
                        this.setState({showWait: true});
                        this.props.onPress&&this.props.onPress();
                    }}
                >
                    <View style={styles.reloadContainer}>
                        <Image
                            style={styles.reloadImage}
                            source={require('../../images/btnsemptyp.png')}
                        />
                        <Text
                            style={styles.reloadText}
                        >
                            重新加载
                        </Text>
                    </View>
                </TouchableOpacity>
                <LoadingIndicator
                    isVisible={isShowLoading}
                />
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;

let styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },

    icon: {
        width: 85,
        height: 85,
    },

    desc: {
        color: '#020202',
        fontSize: 13,
        marginTop: 23,
        backgroundColor: 'transparent',
    },

    reloadContainer: {
        marginTop: 63,
        width: 237,
        height: 45,
        backgroundColor: 'transparent',
        justifyContent: 'center',
        flexDirection: 'column',
    },

    reloadImage: {
        position: 'absolute',
        left: 0,
        top: 0,
        width: 237,
        height: 45,
        borderRadius: 5
    },

    reloadText: {
        alignSelf: 'center',
        color: 'white',
        fontSize: 15,
        backgroundColor: 'transparent'
    }
});