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

import React,{Component} from 'react';
import { StyleSheet, Text, View,Image } from 'react-native';
import { List,ActionSheet,Toast } from 'antd-mobile-rn';
import { connect } from 'react-redux';
import LeanCloudAPI from '../../../leancloud';
import ImagePicker from 'react-native-image-crop-picker';
// const Buffer = require('buffer').Buffer;
import commonStyle from '../../../styles/styles.js';
// import FileSystem from 'react-native-filesystem';

import {Device ,Icon} from '../../../tool';



const Item = List.Item;
const Brief = Item.Brief;



class Infomation extends Component {
    constructor(props){
        super(props)
        this.state={
            
        }
    }
    static navigationOptions ={
        title:'个人信息'
    }


    push(routeName){
        const { navigation } =this.props
        navigation.navigate({ routeName })
    }
    showActionSheet(){
        const {navigation,UserAction} =this.props
        const {id} = UserAction
        const BUTTONS = [
          '拍照换头像',
          '从相册中选择新头像',
          '取消',
        ];
        ActionSheet.showActionSheetWithOptions(
          {
            options: BUTTONS,
            cancelButtonIndex: 2
          },
          (buttonIndex) => {

            const opction = {
                width: 400,
                height: 400,
                cropping: true,
                cropperChooseText:'确认',
                cropperCancelText:"取消",
                loadingLabelText:'处理中...',
                cropperStatusBarColor:"#1c90f5",
                cropperToolbarColor:"#1c90f5",
                compressImageQuality:0.8,
                hideBottomControls:true,
            }
            switch(buttonIndex){
                case  0 :
                ImagePicker.openCamera(opction).then(image => {
                    UserAction.head = image.path
                    let file= {filename:image.filename,height:400,isStored:false,type:image.mime,uri: image.path,width:400,localFile:image.path}
                    let name = (id+new Date().getTime() + image.filename +'').toLocaleLowerCase()
                    Toast.loading('头像修改中',50)
                    LeanCloudAPI.upFile(name,file,(e)=>{
                        LeanCloudAPI.updateUser('head',e,()=>{
                            Toast.success('修改成功')
                            navigation.dispatch({type:'USER',user:UserAction})
                        })
                    })
                  });
                break;
                case  1 :
                
                ImagePicker.openPicker(opction).then(image => {
                    UserAction.head = image.path
                    let file= {filename:image.filename,height:400,isStored:false,type:image.mime,uri: image.path,width:400,localFile:image.path}
                    let name = (id+new Date().getTime() + image.filename +'').toLocaleLowerCase()
                    Toast.loading('头像修改中',50)
                    LeanCloudAPI.upFile(name,file,(e)=>{
                        LeanCloudAPI.updateUser('head',e,()=>{
                            Toast.success('修改成功')
                            navigation.dispatch({type:'USER',user:UserAction})
                        })
                    })


                  });
                break;
            }
          },
        );
      }

    render(){
        const {UserAction } =this.props
        const { id ,username ,head,mobilePhoneNumber} =UserAction
        if(head){
             source = {
                uri:head,
                cache: 'force-cache'
            }
        }else{
            source = Icon.icon
        }
        return (
            <View style={commonStyle.page}>
                <List style={commonStyle.list}>  
                    <Item
                    style={commonStyle.item}
                    onClick={()=>{this.showActionSheet()}}
                    extra={
                        <View style={{ width: Device.scale(29), height: Device.scale(29) ,borderRadius:Device.scale(5),overflow:'hidden'}}>
                            <Image
                        source={source}
                        style={{ width: Device.scale(29), height: Device.scale(29) }}
                        />
                        </View>
                    }
                    arrow="horizontal"
                    >
                    <Text style={styles.title}>头像</Text>
                    </Item>
                </List>
                <List style={commonStyle.list}>  
                    <Item
                    style={commonStyle.item}
                    extra={username} arrow="horizontal" onClick={() => {this.push('ReName')}}>
                    <Text style={styles.title}>昵称</Text>
                    </Item>
                </List>
                <List style={commonStyle.list}>  
                    <Item
                    style={commonStyle.item}
                    extra={
                        <View>
                            <Brief style={{ textAlign: 'right' }}>{id}</Brief>
                        </View>
                        }
                    >
                        <Text style={styles.title}>ID</Text>
                    </Item>
                </List>
                <List style={commonStyle.list}>  
                    <Item
                    style={commonStyle.item}
                        extra={
                        <View>
                            <Brief style={{ textAlign: 'right' }}>{mobilePhoneNumber}</Brief>
                        </View>
                        }
                    >
                        <Text style={styles.title}>手机号</Text>
                    </Item>
                
                </List>
                <List style={commonStyle.list}>  
                    <Item
                    style={commonStyle.item}
                    onClick={() => {this.push('QrCode')}}
                    extra={
                        <Image
                        source={Icon.Mine.code}
                        style={{ width: Device.scale(29), height: Device.scale(29) }}
                        />
                    }
                    arrow="horizontal"
                    >
                    <Text style={styles.title}>我的二维码</Text>
                    </Item>
                </List>
                </View>
        )
    }
}

const styles = StyleSheet.create({
    title:{
      fontSize:Device.scale(16)
    }
  });
const mapStateToProps = ({UserAction} )=> {

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