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

const instructions = Platform.select({
  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
  android:
    "Double tap R on your keyboard to reload,\n" +
    "Shake or press menu button for dev menu"
});

type Props = {};
var width = Dimensions.get("window").width;
var height = Dimensions.get("window").height;
export default class BasePage extends Component<Props> {
  render() {
    return (
      <ImageBackground
        style={{
          flex: 1,
          width: "100%",
          height: "100%",
          Background: "#F8F8F8"
        }}
      />
    );
  }
  getWindowHeight() {
    return height;
  }
  getWindowWidth() {
    return width;
  }

  toNextPage(params) {
    //跳转之前移除当前界面的监听
    this.removeListener();
    this.props.navigation.navigate(params);
  }
  Toast(params) {
    AndroidUtil.showToast(params, AndroidUtil.SHORT);
  }
  toWebPage(json) {
    AndroidUtil.toWebActivity(json);
  }
  testJssss() {
    //测试调用安卓方法然后安卓方法调用JS下面的监听
    AndroidUtil.testJS();
  }
  goBack() {
    //返回上一页
    this.props.navigation.goBack();
  }

  removeListener() {
    if (this.testJSaaa) {
      this.testJSaaa.remove();
    }
    if (this.toJsByAndroid) {
      this.toJsByAndroid.remove();
    }
  }

  componentWillMount() {
    //监听事件名为EventName的事件
    this.testJSaaa = DeviceEventEmitter.addListener("testJSaaa", e => {
      //e是原生传过来的参数,ceshi是安卓里面put的key
      alert(e.ceshi);
    });

    this.toJsByAndroid = DeviceEventEmitter.addListener("toJsByAndroid", e => {
      alert(e.name);
      alert(e.sex);
      alert(e.age);
    });
  }

  componentWillUnmount() {
    // 移除监听
    this.removeListener();
  }
}

const styles = StyleSheet.create({
  title_text: {
    justifyContent: "center",
    alignItems: "center",
    color: "red",
    fontSize: 30,
    textAlign: "center",
    marginTop: 30,
    marginBottom: 50
  }
});