timepill-app/src/component/userIntro.js

import React, {Component} from 'react';
import {StyleSheet, Text, View, ScrollView, InteractionManager} from 'react-native';
import {Avatar} from "react-native-elements";
import moment from 'moment';

import Color from '../style/color';
import Api from '../util/api';
import Msg from '../util/msg';

import UserIcon from './userIcon'
import Loading from './loading'


export default class UserIntro extends Component {

    constructor(props) {
        super(props);

        this.state = {
            user: props.user,
            isLoading: true
        };
    }

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            this.loadUser();
        });
    }

    loadUser() {
        let user = this.state.user;
        (user ? Api.getUserInfo(user.id) : Api.getSelfInfoByStore())
            .then(user => {
                this.setState({
                    user: user
                });
            })
            .catch(e => {
                Msg.showMsg('用户信息加载失败');
            })
            .done(() => {
                this.setState({
                    isLoading: false
                })
            });
    }

    render() {
        const user = this.state.user;

        return this.state.isLoading
            ? <Loading visible={this.state.isLoading}></Loading>
            : (
                <ScrollView style={localStyle.container} automaticallyAdjustContentInsets={false}>
                    <View style={localStyle.userIcon}>
                        <UserIcon width={90} height={90} iconUrl={user.coverUrl} />
                        <Text style={localStyle.userTitle}>{user.name}</Text>
                    </View>

                    {
                        user.intro && user.intro.length > 0
                        ? (<Text style={localStyle.introText}>{user.intro}</Text>) : null
                    }
                    
                    <Text style={localStyle.joinTime}>
                        {moment(user.created).format('YYYY年M月D日')}加入胶囊
                    </Text>

                </ScrollView>
            );
    }
}

const localStyle = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    },
    userIcon: {
        height: 230,
        backgroundColor: 'white',
        alignItems: 'center',
        justifyContent: 'center'
    },
    userTitle: {
        fontSize: 22,
        marginTop: 30,
        fontWeight: 'bold',
        color: '#000'
    },
    introText: {
        padding: 15,
        color: Color.text,
        lineHeight: 24,
        textAlign: 'center'
    },
    joinTime: {
        marginTop: 30,
        marginBottom:60,
        padding: 15,
        color: Color.inactiveText,
        lineHeight: 20,
        textAlign: 'center'
    }
});