huiliao-app/huiliaoAPP/src/pages/Mine/index.js

import React,{Component} from 'react';
import { View ,Text,Image,StyleSheet} from 'react-native';
import commonStyle from '../../styles/styles.js';
import { connect } from 'react-redux';
import { List } from 'antd-mobile-rn';
import {Device,Icon} from '../../tool'
const Item = List.Item;
const Brief = Item.Brief;

class Mine extends Component {
    constructor(props){
        super(props)
    }
    push(routeName){
        const { navigation } =this.props
        navigation.navigate({ routeName })
    }
    render(){
        const {UserAction } =this.props
        const {username,id,head} =UserAction
        let source={}
        if(head){
             source = {
                uri:head,
                cache: 'force-cache'
            }
        }else{
            source = Icon.icon
        }
        
        return (
            <View style={commonStyle.page} >
                <List style={styles.head}>
                    <Item
                        style={styles.headItem}
                        onClick={()=>{this.push('Infomation')}}
                        thumb={
                            <View style={styles.thumb}>
                                <Image
                                source={source}
                                style={styles.info}
                                />
                            </View>
                        }
                        extra={
                        <Image
                            source={Icon.Mine.code}
                            style={styles.code}
                        />
                        }
                        arrow="horizontal"
                    >
                        {username}
                        <Brief style={styles.id}>ID:{id}</Brief>
                    </Item>
                </List>

                <List style={commonStyle.list}>
                    <Item
                        style={commonStyle.item}
                        onClick={()=>{this.push('Setting')}}
                        thumb={
                            <Image
                             source={Icon.Mine.set}
                              style={
                                  styles.icon
                              }
                            
                            />
                        }
                        arrow="horizontal"
                        >
                        设置
                    </Item>
                </List>
            </View>
        )
    }
}

const styles = StyleSheet.create({

    head:{
      height:Device.scale(80),
      marginBottom:Device.scale(10),
      backgroundColor: '#fff',
    },
    headItem:{
      height:Device.scale(80),
    },
    thumb:{
        width:Device.scale(50),
        height:Device.scale(50),
        marginRight:Device.scale(12),
        borderRadius:Device.scale(5),
        overflow:'hidden'
    },
    info:{
        width: Device.scale(50),
        height: Device.scale(50) 
    },
    code:{
         width: Device.scale(21), 
         height: Device.scale(21) 
    },
    id:{marginTop:Device.scale(4)},
    icon:{ width: Device.scale(21), height: Device.scale(21),marginRight:9 }
  });

const mapStateToProps = ({UserAction} )=> {

    return {UserAction}
}
export default connect(mapStateToProps)(Mine);