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,
  DeviceEventEmitter
} from "react-native";
import AndroidUtil from "../../util/AndroidUtil";
import BasePage from "../BasePage";
import CourseTitle from "./CourseTitle";
import Header from "./Header";

type Props = {};
export default class PersonalInfo extends BasePage {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <StatusBar
          // backgroundColor={"transparent"}
          barStyle={"dark-content"}
          backgroundColor={"white"}
          translucent={false}
        />

        <ImageBackground style={{ flex: 1, backgroundColor: "blue" }}>
          <View
            style={{
              flex: 1,
              flexDirection: "column"
            }}
          >
            <View
              style={{
                width: "100%",
                flex: 1
              }}
            >
              <CourseTitle
                width={this.getWindowWidth()}
                title="个人信息"
                backPress={() => this.goBack()}
                lefttype={2}
                righttype={2}
                textcolor={"white"}
                backPress={() => alert("点击左侧")}
                rightPress={() => 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
                }}
              />
            </View>
            <View
              style={{
                width: "100%",
                flex: 4,
                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={{
                width: "100%",
                alignItems: "center",
                justifyContent: "center",
                flex: 4
              }}
            >
              <View
                style={{
                  backgroundColor: "#F3F3F3",
                  width: "90%",
                  height: "90%",
                  overflow: "hidden",
                  borderRadius: 20
                }}
              >
                {this.userInfo456()}
              </View>
            </View>
            <View
              style={{
                width: "100%",
                flex: 4,
                alignItems: "center",
                justifyContent: "center"
              }}
            >
              <View
                style={{
                  width: "80%",
                  height: "35%"
                }}
              >
                <ImageBackground
                  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"
                  }}
                  style={{
                    flex: 1,
                    alignItems: "center",
                    borderRadius: 40,
                    justifyContent: "center",
                    width: "100%",
                    height: "100%"
                  }}
                  imageStyle={{ borderRadius: 40 }}
                >
                  <Text
                    style={{
                      fontSize: 30,
                      color: "white",
                      width: "100%",
                      textAlign: "center"
                    }}
                  >
                    退出登录
                  </Text>
                </ImageBackground>
              </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"
            }}
          >
            <Image
              style={{
                backgroundColor: "yellow",
                width: "50%",
                height: "50%"
              }}
            />
          </View>

          <Text style={styles.item_text}>头像</Text>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <Image
              style={{
                backgroundColor: "yellow",
                width: "50%",
                height: "50%"
              }}
            />
          </View>
        </View>
        <View style={{ flex: 0.05 }} />
        <View style={styles.item}>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <Image
              style={{
                backgroundColor: "yellow",
                width: "50%",
                height: "50%"
              }}
            />
          </View>

          <Text style={styles.item_text}>昵称</Text>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <Image
              style={{
                backgroundColor: "yellow",
                width: "50%",
                height: "50%"
              }}
            />
          </View>
        </View>
        <View style={{ flex: 0.05 }} />

        <View style={styles.item}>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <Image
              style={{
                backgroundColor: "yellow",
                width: "50%",
                height: "50%"
              }}
            />
          </View>

          <Text style={styles.item_text}>生日</Text>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <Image
              style={{
                backgroundColor: "yellow",
                width: "50%",
                height: "50%"
              }}
            />
          </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"
            }}
          >
            <Image
              style={{
                backgroundColor: "yellow",
                width: "50%",
                height: "50%"
              }}
            />
          </View>

          <Text style={styles.item_text}>所在地区</Text>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <Image
              style={{
                backgroundColor: "yellow",
                width: "50%",
                height: "50%"
              }}
            />
          </View>
        </View>
        <View style={{ flex: 0.05 }} />
        <View style={styles.item}>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <Image
              style={{
                backgroundColor: "yellow",
                width: "50%",
                height: "50%"
              }}
            />
          </View>

          <Text style={styles.item_text}>我的学习</Text>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <Image
              style={{
                backgroundColor: "yellow",
                width: "50%",
                height: "50%"
              }}
            />
          </View>
        </View>
        <View style={{ flex: 0.05 }} />
        <View style={styles.item}>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <Image
              style={{
                backgroundColor: "yellow",
                width: "50%",
                height: "50%"
              }}
            />
          </View>

          <Text style={styles.item_text}>我的年级</Text>
          <View
            style={{
              flex: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <Image
              style={{
                backgroundColor: "yellow",
                width: "50%",
                height: "50%"
              }}
            />
          </View>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  item: {
    flex: 1,
    width: "100%",
    flexDirection: "row",
    backgroundColor: "white"
  },
  item_text: {
    flex: 10,
    textAlignVertical: "center",
    color: "black",
    fontSize: 20
  }
});