efunbox-mobile-8/pages/components/PersonalInfo.js

/**
 * 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 Header from "./Header";
import PersonalInfoDialog from "./PersonalInfoDialog";

type Props = {};
export default class PersonalInfo extends BasePage {
  state = {
    modalVisible: false
  };

  setModalVisible(visible) {
    this.setState({ modalVisible: visible });
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        <PersonalInfoDialog ref={view => (this.dialog = view)} />
        <StatusBar
          backgroundColor={"transparent"}
          barStyle={"dark-content"}
          backgroundColor={"white"}
          translucent={false}
        />

        <ImageBackground
          source={require("../../imgs/topbg.png")}
          style={{ flex: 1 }}
          imageStyle={{ resizeMode: "contain" }}
        >
          <View
            style={{
              flex: 1,
              flexDirection: "column"
            }}
          >
            <View
              style={{
                width: "100%",
                flex: 2
              }}
            >
              <CourseTitle
                width={this.getWindowWidth()}
                title="个人信息"
                backPress={() => this.goBack()}
                lefttype={2}
                textcolor={"white"}
                backPress={() => alert("点击左侧")}
              />
            </View>

            <View
              style={{
                width: "100%",
                flex: 3,
                alignItems: "center",
                justifyContent: "center"
              }}
            >
              <View
                style={{
                  backgroundColor: "white",
                  width: "90%",
                  height: "90%",
                  alignItems: "center",
                  justifyContent: "center",
                  borderRadius: 20,
                  overflow: "hidden"
                }}
              >
                <Header
                  uri="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&amp;fm=26&amp;gp=0.jpg"
                  username="卡通笨笨熊"
                  flowerNumber="123234"
                  onPress={() => this.toNextPage("MainActivity")}
                />
              </View>
            </View>
            <View style={{ flex: 0.1 }} />
            <View
              style={{
                width: "100%",
                flex: 4.1,
                alignItems: "center",
                justifyContent: "center"
              }}
            >
              <View
                style={{
                  backgroundColor: "#F3F3F3",
                  width: "90%",
                  alignItems: "center",
                  justifyContent: "center",
                  height: "90%",
                  overflow: "hidden",
                  borderRadius: 20
                }}
              >
                {this.userInfo123()}
              </View>
            </View>
            <View style={{ flex: 0.1 }} />
            <View
              style={{
                width: "100%",
                alignItems: "center",
                justifyContent: "center",
                flex: 4.1
              }}
            >
              <View
                style={{
                  backgroundColor: "#F3F3F3",
                  width: "90%",
                  height: "90%",
                  overflow: "hidden",
                  borderRadius: 20
                }}
              >
                {this.userInfo456()}
              </View>
            </View>
            <View
              style={{
                width: "100%",
                flex: 4,
                flexDirection: "column"
              }}
            >
              <View style={{ flex: 0.5 }} />
              <View style={{ flex: 1, flexDirection: "row" }}>
                <View style={{ flex: 1 }} />
                <View
                  style={{
                    flex: 7,
                    width: "100%",
                    height: "100%"
                  }}
                >
                  <TouchableOpacity
                    activeOpacity={1}
                    style={{
                      flex: 1,
                      width: "100%",
                      alignItems: "center",
                      justifyContent: "center",
                      height: "100%"
                    }}
                    onPress={() => this.logout()}
                  >
                    <ImageBackground
                      source={require("../../imgs/logoutbg1.png")}
                      style={{
                        flex: 1,
                        width: "100%",
                        resizeMode: "repeat",
                        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>
          </View>
        </ImageBackground>
      </View>
    );
  }

  userInfo123() {
    return (
      <View
        style={{
          width: "100%",
          alignItems: "center",
          justifyContent: "center",
          height: "100%"
        }}
      >
        <View style={styles.item}>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            {this.choseheadericon(0)}
          </View>

          <Text style={styles.item_text}>头像</Text>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            {this.getArraowImg(0)}
          </View>
        </View>
        <View style={{ flex: 0.05 }} />
        <View style={styles.item}>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            {this.choseheadericon(1)}
          </View>

          <Text style={styles.item_text}>昵称</Text>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            {this.getArraowImg(1)}
          </View>
        </View>
        <View style={{ flex: 0.05 }} />

        <View style={styles.item}>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            {this.choseheadericon(2)}
          </View>

          <Text style={styles.item_text}>生日</Text>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            {this.getArraowImg(2)}
          </View>
        </View>
      </View>
    );
  }

  userInfo456() {
    return (
      <View
        style={{
          width: "100%",
          alignItems: "center",
          justifyContent: "center",
          height: "100%"
        }}
      >
        <View style={styles.item}>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            {this.choseheadericon(3)}
          </View>

          <Text style={styles.item_text}>所在地区</Text>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            {this.getArraowImg(3)}
          </View>
        </View>
        <View style={{ flex: 0.05 }} />
        <View style={styles.item}>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            {this.choseheadericon(4)}
          </View>

          <Text style={styles.item_text}>我的学校</Text>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            {this.getArraowImg(4)}
          </View>
        </View>
        <View style={{ flex: 0.05 }} />
        <View style={styles.item}>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            {this.choseheadericon(5)}
          </View>

          <Text style={styles.item_text}>我的年级</Text>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            {this.getArraowImg(5)}
          </View>
        </View>
      </View>
    );
  }
  getArraowImg(type) {
    return (
      <TouchableOpacity
        style={{
          width: "100%",
          height: "100%",
          alignItems: "center",
          justifyContent: "center"
        }}
        onPress={() => this.arrowpress(type)}
      >
        <Image
          source={require("../../imgs/arrow.png")}
          style={{
            width: "20%",
            height: "30%"
          }}
        />
      </TouchableOpacity>
    );
  }

  choseheadericon(type) {
    let headerpath;
    switch (type) {
      case 0:
        headerpath = require("../../imgs/headportrait.png");

        break;
      case 1:
        headerpath = require("../../imgs/nickname.png");
        break;
      case 2:
        headerpath = require("../../imgs/birthday.png");
        break;
      case 3:
        headerpath = require("../../imgs/location.png");
        break;
      case 4:
        headerpath = require("../../imgs/school.png");
        break;
      case 5:
        headerpath = require("../../imgs/grade.png");
        break;
    }
    // alert(headerpath);
    return (
      <Image
        source={headerpath}
        style={{
          width: "60%",
          height: "60%",
          resizeMode: "contain"
        }}
      />
    );
  }

  arrowpress(type) {
    switch (type) {
      case 0:
        alert("点击头像");
        break;
      case 1:
        this.modalDialog();
        break;
      case 2:
        alert("生日");
        break;
      case 3:
        alert("所在地区");
        break;
      case 4:
        alert("我的学校");
        break;
      case 5:
        alert("我的年级");
        break;
    }
  }

  logout() {
    alert("点击退出了");
  }

  modalDialog() {
    this.dialog.setModalVisible(true);
  }
}

const styles = StyleSheet.create({
  item: {
    flex: 1,
    width: "100%",
    flexDirection: "row",
    backgroundColor: "white"
  },
  item_text: {
    flex: 10,
    marginLeft: 10,
    textAlignVertical: "center",
    color: "black",
    fontSize: 20
  }
});