/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
ImageBackground,
Button,
StatusBar,
Modal,
TouchableHighlight,
DeviceEventEmitter
} from "react-native";
import AndroidUtil from "../../util/AndroidUtil";
import BasePage from "../BasePage";
import CourseTitle from "./CourseTitle";
import ChosePhoto from "./ChosePhoto";
import RegionModal from "./RegionModal";
import BirthdayModal from "./BirthdayModal";
import GradeSelectionModal from "./GradeSelectionModal";
import Header from "./Header";
import PersonalInfoDialog from "./PersonalInfoDialog";
type Props = {};
export default class PersonalInfo extends BasePage {
state = {
nickName: "初始昵称",
schoolName: "未设置",
cisys: "北京市",
grade_text: "七年级",
grade_index: 6,
birthday_time: 0
};
updateState(data) {
this.setState(data);
}
render() {
return (
<View style={{ flex: 1 }}>
<PersonalInfoDialog
ref={view => (this.dialog = view)}
updateParentState={this.updateState.bind(this)}
/>
<ChosePhoto ref={view => (this.chosephoto = view)} />
<RegionModal
ref={view => (this.regionmodal = view)}
cityscommit={this.cityscommit.bind(this)}
/>
<GradeSelectionModal
ref={view => (this.gradeselectionModal = view)}
commitGrade={this.commitGrade.bind(this)}
grade_index={this.state.grade_index}
/>
<BirthdayModal
ref={view => (this.birthdaymodal = view)}
birthdaycommit={this.birthdaycommit.bind(this)}
/>
<StatusBar backgroundColor={"transparent"} translucent={true} />
<View
style={{
flex: 1,
flexDirection: "column"
}}
>
<ImageBackground
source={require("../images/userInfo/top.png")}
style={{
flex: 2.8,
width: "100%",
backgroundColor: "#F0F1F5",
height: "75%"
}}
imageStyle={{ resizeMode: "cover" }}
>
<View
style={{
flex: 1,
alignItems: "center",
justifyContent: "center",
flexDirection: "column"
}}
>
<CourseTitle
style={{ flex: 4 }}
width={this.getWindowWidth()}
title="个人信息"
backPress={() => this.goBack()}
lefttype={2}
righttype={0}
textcolor={"white"}
backPress={() => this.goBack()}
/>
<TouchableOpacity
style={{
flex: 1,
backgroundColor: "white",
width: "90%",
bottom: 0,
alignItems: "center",
justifyContent: "center",
borderRadius: 20,
overflow: "hidden"
}}
activeOpacity={1}
onPress={() => this.arrowpress(0)}
>
<View
style={{
flex: 1,
borderRadius: 20,
overflow: "hidden",
alignItems: "center",
justifyContent: "center",
flexDirection: "row"
}}
>
<View style={{ flex: 0.5 }} />
<View
style={{
flex: 3,
height: "100%",
alignItems: "center",
justifyContent: "center"
}}
>
<Image
style={{
borderRadius: 50,
width: "80%",
height: "70%"
// borderWidth: 3
// borderColor: "red"
}}
source={{
uri:
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg"
}}
/>
</View>
<View
style={{
flex: 9,
backgroundColor: "white",
height: "100%",
justifyContent: "center"
}}
>
<Text style={{ left: 10, color: "black", fontSize: 20 }}>
修改头像
</Text>
</View>
<View
style={{
flex: 1.5,
height: "65%",
alignItems: "center",
justifyContent: "center"
}}
>
{this.getArraowImg(0)}
</View>
</View>
</TouchableOpacity>
</View>
</ImageBackground>
<View style={{ flex: 0.5, backgroundColor: "#F0F1F5" }} />
<View
style={{
width: "100%",
flex: 4.3,
alignItems: "center",
backgroundColor: "#F0F1F5"
}}
>
<View
style={{
backgroundColor: "rgb(242, 242, 242)",
width: "90%",
alignItems: "center",
justifyContent: "center",
height: "100%",
overflow: "hidden",
borderRadius: 10
}}
>
<View
style={{
width: "100%",
alignItems: "center",
justifyContent: "center",
height: "100%"
}}
>
<TouchableOpacity
style={{
flex: 1,
marginVertical: 1,
width: "100%",
flexDirection: "row",
backgroundColor: "white"
}}
activeOpacity={1}
onPress={() => this.arrowpress(1)}
>
<View
style={{
flex: 2,
alignItems: "center",
justifyContent: "center"
}}
>
{this.choseheadericon(1)}
</View>
<Text style={styles.item_text}>昵称</Text>
<View
style={{
flex: 5,
alignItems: "flex-end"
}}
>
<Text
style={{
flex: 1,
fontSize: 15,
textAlignVertical: "center"
}}
numberOfLines={1}
ellipsizeMode={"tail"}
>
{this.state.nickName}
</Text>
</View>
<View
style={{
flex: 1.1,
alignItems: "center",
justifyContent: "center"
}}
>
{this.getArraowImg(1)}
</View>
</TouchableOpacity>
<TouchableOpacity
style={{
flex: 1,
width: "100%",
flexDirection: "row",
backgroundColor: "white",
marginVertical: 1
}}
activeOpacity={1}
onPress={() => this.arrowpress(2)}
>
<View
style={{
flex: 2,
alignItems: "center",
justifyContent: "center"
}}
>
{this.choseheadericon(2)}
</View>
<Text style={styles.item_text}>生日</Text>
<View
style={{
flex: 5,
alignItems: "flex-end"
}}
>
<Text
style={{
flex: 1,
fontSize: 15,
textAlignVertical: "center"
}}
numberOfLines={1}
ellipsizeMode={"tail"}
>
{this.state.birthday_time}
</Text>
</View>
<View
style={{
flex: 1.1,
alignItems: "center",
justifyContent: "center"
}}
>
{this.getArraowImg(2)}
</View>
</TouchableOpacity>
<TouchableOpacity
style={{
flex: 1,
width: "100%",
flexDirection: "row",
backgroundColor: "white",
marginVertical: 1
}}
activeOpacity={1}
onPress={() => this.arrowpress(3)}
>
<View
style={{
flex: 2,
alignItems: "center",
justifyContent: "center"
}}
>
{this.choseheadericon(3)}
</View>
<Text style={styles.item_text}>所在地区</Text>
<View
style={{
flex: 5,
alignItems: "flex-end"
}}
>
<Text
style={{
flex: 1,
fontSize: 15,
textAlignVertical: "center"
}}
numberOfLines={1}
ellipsizeMode={"tail"}
>
{this.state.cisys}
</Text>
</View>
<View
style={{
flex: 1.1,
alignItems: "center",
justifyContent: "center"
}}
>
{this.getArraowImg(3)}
</View>
</TouchableOpacity>
<TouchableOpacity
style={{
flex: 1,
width: "100%",
flexDirection: "row",
backgroundColor: "white",
marginVertical: 1
}}
activeOpacity={1}
onPress={() => this.arrowpress(4)}
>
<View
style={{
flex: 2,
alignItems: "center",
justifyContent: "center"
}}
>
{this.choseheadericon(4)}
</View>
<Text style={styles.item_text}>我的学校</Text>
<View
style={{
flex: 5,
alignItems: "flex-end"
}}
>
<Text
style={{
flex: 1,
fontSize: 15,
textAlignVertical: "center"
}}
numberOfLines={1}
ellipsizeMode={"tail"}
>
{this.state.schoolName}
</Text>
</View>
<View
style={{
flex: 1.1,
alignItems: "center",
justifyContent: "center"
}}
>
{this.getArraowImg(4)}
</View>
</TouchableOpacity>
<TouchableOpacity
style={{
flex: 1,
marginTop: 1,
width: "100%",
flexDirection: "row",
backgroundColor: "white",
marginVertical: 1
}}
activeOpacity={1}
onPress={() => this.arrowpress(5)}
>
<View
style={{
flex: 2,
alignItems: "center",
justifyContent: "center"
}}
>
{this.choseheadericon(5)}
</View>
<Text style={styles.item_text}>我的年级</Text>
<View
style={{
flex: 5,
alignItems: "flex-end"
}}
>
<Text
style={{
flex: 1.1,
fontSize: 15,
textAlignVertical: "center"
}}
numberOfLines={1}
ellipsizeMode={"tail"}
>
{this.state.grade_text}
</Text>
</View>
<View
style={{
flex: 1.1,
alignItems: "center",
justifyContent: "center"
}}
>
{this.getArraowImg(5)}
</View>
</TouchableOpacity>
</View>
</View>
</View>
<View
style={{
width: "100%",
flex: 4,
backgroundColor: "#F0F1F5",
flexDirection: "column"
}}
>
<View style={{ flex: 2.5 }} />
<View style={{ flex: 2, flexDirection: "row" }}>
<View style={{ flex: 1 }} />
<View
style={{
flex: 7,
width: "100%",
height: "100%"
}}
>
<TouchableOpacity
activeOpacity={1}
style={{
flex: 2,
width: "100%",
alignItems: "center",
justifyContent: "center",
height: "100%"
}}
onPress={() => this.logout()}
>
<ImageBackground
source={require("../images/userInfo/logoutbg1.png")}
style={{
flex: 1,
width: "100%",
alignItems: "center",
justifyContent: "center",
height: "100%"
}}
imageStyle={{ resizeMode: "contain" }}
>
<Text
style={{
fontSize: 30,
color: "white",
width: "100%",
textAlign: "center"
}}
>
退出登录
</Text>
</ImageBackground>
</TouchableOpacity>
<View style={{ flex: 1 }} />
</View>
<View style={{ flex: 1 }} />
</View>
<View style={{ flex: 0.8 }} />
</View>
</View>
</View>
);
}
// userInfo123() {
// return (
// );
// }
getArraowImg(type) {
return (
<TouchableOpacity
style={{
width: "100%",
height: "100%",
alignItems: "center",
resizeMode: "contain",
justifyContent: "center"
}}
onPress={() => this.arrowpress(type)}
>
<Image
source={require("../images/userInfo/arrow.png")}
style={{
width: "20%",
height: "30%"
}}
/>
</TouchableOpacity>
);
}
choseheadericon(type) {
let headerpath;
switch (type) {
case 0:
headerpath = require("../images/userInfo/headportrait.png");
break;
case 1:
headerpath = require("../images/userInfo/nickname.png");
break;
case 2:
headerpath = require("../images/userInfo/birthday.png");
break;
case 3:
headerpath = require("../images/userInfo/location.png");
break;
case 4:
headerpath = require("../images/userInfo/school.png");
break;
case 5:
headerpath = require("../images/userInfo/grade.png");
break;
}
// alert(headerpath);
return (
<Image
source={headerpath}
style={{
width: "60%",
height: "60%",
resizeMode: "contain"
}}
/>
);
}
arrowpress(type) {
switch (type) {
case 0:
this.chosephoto.setModalVisible(true);
break;
case 1:
this.dialog.setInfo("修改昵称", "昵称");
this.dialog.setModalVisible(true, 1);
break;
case 2:
// alert("生日");
this.birthdaymodal.setModalVisible(true);
break;
case 3:
this.regionmodal.setModalVisible(true);
break;
case 4:
this.dialog.setInfo("我的学校", "学校名称");
this.dialog.setModalVisible(true, 2);
break;
case 5:
this.gradeselectionModal.setModalVisible(true);
break;
}
}
logout() {
alert("点击退出了");
}
cityscommit(provinces_name, citys_name) {
this.setState({
cisys: provinces_name + citys_name
});
}
commitGrade(text, index) {
this.setState({
grade_text: text,
grade_index: index
});
}
birthdaycommit(time) {
this.setState({
birthday_time: time
});
}
}
const styles = StyleSheet.create({
item: {
flex: 1,
width: "100%",
flexDirection: "row",
backgroundColor: "white",
marginTop: 1
},
item_text: {
flex: 3,
textAlignVertical: "center",
color: "black",
fontSize: 16
}
});