campus_react_local/App/views/mine/UserCenterViewController.js

/**
 * Created by zack on 2018/6/24.
 */
import {
	View,
	Text,
	StyleSheet,
	Image,
	TouchableOpacity,
	FlatList,
	Modal,
	Animated,
	TextInput,
	Platform,
	Keyboard,
	Picker,
	DatePickerAndroid,
	DatePickerIOS,
	Alert,
	ImageBackground,
	findNodeHandle
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../utils/DimensionsTools'
import HttpTools from '../../network/HttpTools'
import {auth, getUserProfile, userProfile, userAvatar, userLogout} from '../../network/API'
import UserCenterItem from './View/UserCenterItem'
import {GlobalUserStorageTool, UserStorageKey} from '../../utils/GlobalUserStorageTool'
import ImagePicker from 'react-native-image-picker'
import { BlurView } from 'react-native-blur';

export default class UserCenterViewController extends Component {
	constructor(props) {
		super(props)
		this.state = {
			headerImageViewSource: require('../../resources/images/Mine/user.png'),
			nickName: '',
			linker: ''
		}
	}

	componentDidMount() {
		GlobalUserStorageTool.load(UserStorageKey.UserInfo, (ret) => {
			console.log("user info: " + ret)
			this.setState({
				nickName: ret.nickname,
				linker: ret.linker,
			})
		}, (error) => {

		})
	}

	renderItem(item) {
		return(
			<UserCenterItem
				image = {item.image}
				title = {item.title}
			/>
		)
	}

	cameraButtonAction() {
		let options = {
			title: 'Select Avatar',
			storageOptions: {
				skipBackup: true,
				path: 'images'
			}
		}

		ImagePicker.showImagePicker(options, (response) => {
			if (response.didCancel) {
				console.log('User cancelled image picker');
			}
			else if (response.error) {
				console.log('ImagePicker Error: ', response.error);
			}
			else if (response.customButton) {
				console.log('User tapped custom button: ', response.customButton);
			}
			else {

				let imageBase64Data = 'data:image/jpeg;base64,' + response.data
				let source = { uri:  imageBase64Data};

				this.setState({headerImageViewSource: source})

				this.uploadImage(response.data)


			}
		})
	}

	uploadImage(base64ImageString) {
		HttpTools.uploadImage(userAvatar, base64ImageString, () => {

		}, (error) => {

		})
	}

	showLogOut() {
		Alert.alert(
			'退出登录',
			'',
			[
				{text: '取消', onPress: () => {}},
				{text: '确定', onPress: () => {
					this.logOut()
				}},
			],
			{ cancelable: false }
		)
	}

	logOut() {
		const param = JSON.stringify({

		})
		HttpTools.delete(userLogout, param, (response) => {
			GlobalUserStorageTool.remove(UserStorageKey.UserInfo) //删除个人信息
			global.token = '' //清理token
			this.props.navigator.popToRoot()
		}, (error) => {

		})
	}

	imageLoaded() {
		this.setState({ viewRef: findNodeHandle(this.backgroundImage) });
	}

	didSelectedMenuItem(index) {

	}

	render() {
		return (
			<View style={styles.View}>
				<Image
					ref={(img) => { this.backgroundImage = img; }}
					style={styles.HeaderBlurImageView}
					onLoadEnd={() => {this.imageLoaded()}}
					source={this.state.headerImageViewSource}/>
				<BlurView
					style={styles.HeaderBlurImageView}
					viewRef={this.state.viewRef}
					blurType="light"
					blurAmount={25}
				/>

				<View style={styles.HeaderBgView}>
					<TouchableOpacity onPress={() => {
						this.showLogOut()
					}} style={{justifyContent: 'center', alignItems: 'flex-end', width: 18, height: 44, position: 'absolute', right: 15, top: (Platform.OS === 'ios' ? 20 : (NavigationBarHeight.height - 44)/2.0)}}>
						<Image style={{width: 18, height: 18}} source={require("../../resources/images/Mine/settings.png")}/>
					</TouchableOpacity>

					<TouchableOpacity onPress={() => {
						this.props.navigator.pop()
					}} style={{justifyContent: 'center', alignItems: 'flex-start', width: 18, height: 44, position: 'absolute', left: 15, top: (Platform.OS === 'ios' ? 20 : (NavigationBarHeight.height - 44)/2.0)}}>
						<Image source={require("../../resources/images/Mine/back.png")}/>
					</TouchableOpacity>

					<TouchableOpacity onPress={() => {
						this.cameraButtonAction()
					}} >
						<Image source={this.state.headerImageViewSource} style={styles.HeaderImageView}/>
					</TouchableOpacity>

					<Text style={styles.NameText}>{this.state.nickName}</Text>
					<Text style={styles.LinkerNumberText}>{'另客号: ' + this.state.linker}</Text>
					<Text style={styles.StatusText}>{'已认证'}</Text>
				</View>

				<View style={styles.MenuBgView}>
					<View style={styles.MenuItemBgView}>
						<TouchableOpacity onPress={() => {
							this.didSelectedMenuItem(0)
						}} style={[styles.MenuItem, {marginLeft: 75}]}>
							<Image  style={{marginRight: 7}} source={require('../../resources/images/Mine/score.png')}/>
							<Text style={{color: '#666666', fontSize: 14}}>{'积分'}</Text>
						</TouchableOpacity>

						<TouchableOpacity onPress={() => {
							this.didSelectedMenuItem(1)
						}}  style={[styles.MenuItem, {marginRight: 75}]}>
							<Image  style={{marginRight: 7}} source={require('../../resources/images/Mine/assignment.png')}/>
							<Text style={{color: '#666666', fontSize: 14}}>{'任务'}</Text>
						</TouchableOpacity>
					</View>
					<View style={{marginLeft: 75, width: ScreenDimensions.width - 150, height: 0.5, backgroundColor: '#efeff4'}} />

					<View style={styles.MenuItemBgView}>
						<TouchableOpacity onPress={() => {
							this.didSelectedMenuItem(2)
						}}  style={[styles.MenuItem, {marginLeft: 75}]}>
							<Image  style={{marginRight: 7}} source={require('../../resources/images/Mine/track.png')}/>
							<Text style={{color: '#666666', fontSize: 14}}>{'动态'}</Text>
						</TouchableOpacity>

						<TouchableOpacity onPress={() => {
							this.didSelectedMenuItem(3)
						}}  style={[styles.MenuItem, {marginRight: 75}]}>
							<Image  style={{marginRight: 7}} source={require('../../resources/images/Mine/collections.png')}/>
							<Text style={{color: '#666666', fontSize: 14}}>{'收藏'}</Text>
						</TouchableOpacity>
					</View>
					<View style={{marginLeft: 75, width: ScreenDimensions.width - 150, height: 0.5, backgroundColor: '#efeff4'}} />

					<View style={styles.MenuItemBgView}>
						<TouchableOpacity onPress={() => {
							this.didSelectedMenuItem(4)
						}}  style={[styles.MenuItem, {marginLeft: 75}]}>
							<Image  style={{marginRight: 7}} source={require('../../resources/images/Mine/feedback.png')}/>
							<Text style={{color: '#666666', fontSize: 14}}>{'反馈'}</Text>
						</TouchableOpacity>
					</View>
					<View style={{marginLeft: 75, width: ScreenDimensions.width - 150, height: 0.5, backgroundColor: '#efeff4'}} />
				</View>


			</View>
		)
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height,
		backgroundColor: 'white'
	},

	HeaderBlurImageView: {
		width: ScreenDimensions.width,
		height: 242,
		alignItems: 'center',
		position: 'absolute'
	},

	HeaderBgView: {
		width: ScreenDimensions.width,
		height: 242,
		alignItems: 'center',
	},
	HeaderImageView: {
		width: 70,
		height: 70,
		marginTop: 88,
		borderRadius: 35,
	},
	NameText: {
		fontSize: 15,
		color: '#ffffff',
		marginTop: 7
	},
	LinkerNumberText: {
		fontSize:10,
		color: '#ffffff',
		marginTop: 7,
	},
	StatusText: {
		fontSize:10,
		color: '#ffffff',
		marginTop: 7,
	},
	MenuBgView: {
		width: ScreenDimensions.width,
		backgroundColor: 'white',
		marginTop: 43,
	},
	MenuItemBgView: {
		width: ScreenDimensions.width,
		height: 80,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
	},
	MenuItem: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center'
	}

})