decorate_touch/jscore/pages/Mine/Home.js

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

import {Button, Provider} from '@ant-design/react-native';
import {Cell, Section, TableView} from 'react-native-tableview-simple';
import {Img} from '../../components';
import {createAction} from '../../utils';
import {connect} from 'react-redux';
import SyncStorage from 'sync-storage';
import Bugly from '../../utils/Bugly';
import {ComponentsStyles} from '../../components/ComponentsStyles';

@connect(auth => ({...auth}))
class MineHome extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentPage: 1,
            version: '',
        };
    }

    static navigationOptions = {
        headerShown: false,  //隐藏顶部导航栏
    };

    componentDidMount() {
        Bugly.getVersion((ver) => {
            this.setState({
                version: ver,
            });
        });
    }

    // 退出
    loginOut = () => {
        this.props.dispatch(createAction('auth/logout')());
    };
    onItemPress = (val) => {
        if (val === 'settingURL') {
            this.loginOut();
        } else {
            this.props.navigation.navigate(val);
        }
    };
    onCheckUpgrade = () => {
        Bugly.checkUpgrade();
    };

    render() {
        const credential = SyncStorage.get('credential');
        const baseURL = SyncStorage.get('baseURL');
        return (
            <View style={{flex: 1, marginTop: ComponentsStyles.top_margin}}>
                <StatusBar backgroundColor={'#f2f2f2'} barStyle='dark-content'/>
                <Provider>
                    <ScrollView>
                        {/* 头像 */}
                        <View style={styles.headImg}>
                            <Image style={styles.img} source={require('../../../assets/images/male_header.png')}>
                            </Image>
                        </View>
                        <View>
                            {/* 名字 */}
                            <Text style={{
                                color: '#333333',
                                fontSize: 22,
                                fontWeight: '900',
                                textAlign: 'center',
                            }}>{credential.username}</Text>
                            <Text
                                style={{
                                    fontSize: 14,
                                    fontWeight: '900',
                                    textAlign: 'center',
                                    marginTop: 5,
                                }}>{credential.dept_name}</Text>
                            <Text
                                style={{
                                    fontSize: 14,
                                    fontWeight: '900',
                                    textAlign: 'center',
                                    marginTop: 5,
                                }}>{baseURL}</Text>
                        </View>
                        {/* 功能 */}
                        <TableView>
                            <Section sectionTintColor='#f2f2f2'>
                                <Cell
                                    accessory="DisclosureIndicator"
                                    cellStyle="RightDetail"
                                    title="修改密码"
                                    image={
                                        <Text style={styles.iconFont}>{'\ue60e'}</Text>
                                    }
                                    onPress={() => this.onItemPress('ChangePassword')}
                                />
                                <Cell
                                    accessory="DisclosureIndicator"
                                    cellStyle="RightDetail"
                                    title="隐私说明"
                                    image={
                                        <Text style={styles.iconFont}>{'\ue61c'}</Text>
                                    }
                                    onPress={() => this.onItemPress('Privacy')}
                                />
                                <Cell
                                    cellStyle="RightDetail"
                                    title="当前版本"
                                    detail={this.state.version}
                                    image={
                                        <Text style={styles.iconFont}>{'\ue6aa'}</Text>
                                    }
                                />

                            </Section>
                        </TableView>
                        {/* 退出登录 */}
                        <Button onPress={this.loginOut} style={styles.button} type="warning">退出登录</Button>
                    </ScrollView>
                </Provider>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    centerView: {
        width: 3,
        backgroundColor: '#d7d7d7',
        borderRadius: 3,
        justifyContent: 'center',
    },
    headImg: {
        flexDirection: 'row',
        justifyContent: 'center',
    },
    img: {
        width: 70,
        height: 70,
        marginVertical: 20,
        borderRadius: 50,
    },
    iconFont: {
        fontFamily: 'iconfont',
        fontSize: 20,
        color: '#1E90FF',
        lineHeight: 30,
    },
    button: {
        marginHorizontal: 10,
    },
});

export default MineHome;