efunbox-mobile-8/pages/components/GradeSelectionModal.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,
  TextInput,
  Button,
  StatusBar,
  Modal,
  ScrollView,
  TouchableHighlight,
  DeviceEventEmitter,
  findNodeHandle,
  UIManager
} from "react-native";

import CitysData from "../../data/citys.json";

type Props = {};
export default class GradeSelectionModal extends Component<Props> {
  state = {
    modalVisible: false,
    click_index: this.props.grade_index,
    item_width: 0,
    item_height: 0,
    grade_data: [
      "一年级",
      "二年级",
      "三年级",
      "四年级",
      "五年级",
      "六年级",
      "七年级",
      "八年级",
      "九年级"
    ]
  };

  render() {
    return (
      <Modal
        // animationType="fade"
        animationType="none"
        transparent={true}
        visible={this.state.modalVisible}
        onRequestClose={() => {
          this.setState({ modalVisible: false });
        }}
      >
        <View
          style={{
            flex: 1,
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          <View
            style={{
              width: "92%",
              backgroundColor: "white",
              height: "80%",
              borderRadius: 20,
              flexDirection: "column",
              overflow: "hidden",
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <View
              style={{
                flex: 1,
                justifyContent: "center",
                alignItems: "center"
              }}
            >
              <Text
                style={{
                  textAlign: "center",
                  fontSize: 22,
                  color: "rgba(58, 58, 58, 1)"
                }}
              >
                我所在的年级
              </Text>
            </View>
            <View
              style={{
                flex: 3,
                width: "100%",
                marginTop: 5
              }}
            >
              {this.centerView()}
            </View>
            <View style={{ flex: 2, width: "90%" }}>
              <ImageBackground
                source={require("../images/userInfo/logoutbg1.png")}
                style={{
                  flex: 1,
                  width: "100%",
                  alignItems: "center",
                  justifyContent: "center",
                  height: "100%"
                }}
                imageStyle={{
                  resizeMode: "contain"
                }}
              >
                <TouchableOpacity
                  style={{
                    width: "100%",
                    alignItems: "center",
                    height: "40%",
                    justifyContent: "center"
                  }}
                  activeOpacity={1}
                  onPress={() => this.commit()}
                >
                  <Text
                    style={{
                      fontSize: 30,
                      color: "white",
                      width: "100%",
                      textAlign: "center"
                    }}
                  >
                    确定
                  </Text>
                </TouchableOpacity>
              </ImageBackground>
            </View>
            <View style={{ flex: 0.5 }} />
          </View>
        </View>
      </Modal>
    );
  }

  centerView() {
    return (
      <View
        style={{
          flex: 1,
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center"
        }}
      >
        <View
          style={{
            flex: 1,
            justifyContent: "space-evenly",
            width: "90%",
            flexDirection: "row",
            //换行显示
            flexWrap: "wrap",
            alignItems: "center"
          }}
          onLayout={event => this.onLayout(event)}
        >
          {this.centerItem()}
        </View>
      </View>
    );
  }
  onLayout(event) {
    // alert(event.nativeEvent.layout.width);
    // alert(event.nativeEvent.layout.width / 3);
    this.setState({
      item_width: event.nativeEvent.layout.width / 3.5,
      item_height: event.nativeEvent.layout.height / 3
    });
  }
  centerItem() {
    let arr = [];
    for (let i = 0; i < this.state.grade_data.length; i++) {
      let index = i;
      let color = "";
      if (this.state.click_index == i) {
        color = "rgba(88, 168, 250, 1)";
      } else {
        color = "rgba(61, 192, 252, 0.15)";
      }
      arr[i] = (
        <TouchableOpacity
          activeOpacity={1}
          key={i}
          style={{
            margin: 1,
            height: this.state.item_height,
            alignItems: "center",
            justifyContent: "center"
          }}
          onPress={() => this.clickGrade(index)}
        >
          <View
            style={{
              width: this.state.item_width,
              height: this.state.item_height / 2,
              backgroundColor: color,
              borderRadius: 20
            }}
          >
            <Text style={styles.item_text}>{this.state.grade_data[i]}</Text>
          </View>
        </TouchableOpacity>
      );
    }

    return arr;
  }
  commit() {
    this.props.commitGrade(
      this.state.grade_data[this.state.click_index],
      this.state.click_index
    );
    this.setModalVisible(false);
  }

  setModalVisible(visible) {
    this.setState({
      modalVisible: visible
    });
  }
  clickGrade(index) {
    this.setState({
      click_index: index
    });
  }
}
const styles = StyleSheet.create({
  item_text: {
    flex: 1,
    textAlign: "center",
    textAlignVertical: "center",
    color: "rgba(58, 58, 58, 1)",
    fontSize: 16
  }
});