import React, {Component} from 'react';
import {View, StyleSheet, Image, Pressable} from 'react-native';
import {login, logout} from '../MyTest';

class OnlineStudyHome extends Component {
  constructor() {
    super();
  }

  componentDidMount() {
    login();
  }

  componentWillUnmount() {
    logout();
  }

  twoPlayerPK = () => {
    this.props.navigation.navigate('双人PK');
  };
  rangePK = () => {
    this.props.navigation.navigate('区域PK');
  };

  render() {
    return (
      <View style={styles.container}>
        <Pressable
          android_ripple={{
            color: '#FFFFFF',
            foreground: true,
          }}
          onPress={this.twoPlayerPK}
          style={styles.button}>
          <Image source={require('./img/scene1.png')} style={styles.image} />
        </Pressable>
        <Pressable
          android_ripple={{
            color: '#FFFFFF',
            foreground: true,
          }}
          onPress={this.rangePK}
          style={styles.button}>
          <Image source={require('./img/scene2.png')} style={styles.image} />
        </Pressable>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F2E2CE',
    //opacity: 0.5,
    flex: 1,
  },
  text: {
    fontSize: 50,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  button: {
    flex: 1,
    borderRadius: 50,
  },
  image: {
    width: null,
    height: null,
    flex: 1,
  },
});

export default OnlineStudyHome;