index.js

import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  Alert,
  PanResponder,
} from 'react-native';
import MyStatistics from '../MyStatistics';
import MyTitle from '../MyTitle';
import SettingButton from '../SettingButton';
import MyBanner from '../MyBanner';
import RangePKState from '../RangePKState';
import {parseMinute, parseRangeID, parseTime} from '../MyUtilities';
import '../GlobalACID';

const {width, height} = Dimensions.get('window');
/**
 * 标语风格切换共使用了组件：
 * 1. GlobalSetting（引入global变量global.bannerStyle，来控制标语风格）
 * 2. SettingButton
 * 3. BannerStyle（在你的Navigator中引入）
 * 4. MyButton（在BannerStyle组件中引入）
 * 5. MyBanner
 *
 * 此外，还使用了：
 * 1. componentDidMount()
 * 2. componentWillUnmount()
 */
class RangePKStudy extends Component {
  constructor() {
    super();
  }

  state = {
    rangeID: undefined,
    user: {
      name: 'username',
      rank: 'error',
      duration: -1,
    },
    ranking: 1,
    timeInTheMatch: 0,
    rankingFirst: {
      name: 'username',
      time: -1,
    },
    rankingSecond: {
      name: 'username',
      time: -1,
    },
    rankingThird: {
      name: 'username',
      time: -1,
    },
  };

  componentDidMount() {
    const {
      navigation,
      route: {params},
    } = this.props;
    navigation.setOptions({
      // 引入SettingButton组件至header的右边
      // 并把this.props传给SettingButton组件以实现Navigation的跳转
      headerRight: () => <SettingButton {...this.props} />,
    });
    this.unsubscribe = navigation.addListener('focus', () => {
      // Screen was focused
      // 强制刷新组件，读取最新的global.bannerStyle
      this.forceUpdate();
    });
    // 以下不是标语风格切换相关
    if (params.rangeID !== undefined) {
      this.setState({rangeID: params.rangeID});
    }
    this.startTimer();
  }

  componentWillUnmount() {
    this.unsubscribe();
    // 以下不是标语风格切换相关
    clearInterval(this.timer);
  }

  calculateTime = () => {
    const {timeInAGame, timeInTheMatch} = this.state;
    this.setState({
      timeInAGame: timeInAGame + 1,
      timeInTheMatch: timeInTheMatch + 1,
    });
  };

  startTimer = () => {
    this.timer = setInterval(() => {
      this.calculateTime();
    }, 1000);
  };

  openRankingList = () => {
    this.props.navigation.navigate('区域排行榜');
  };

  panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,

    onMoveShouldSetPanResponder: (event, gestureState) => {
      let {dx} = gestureState;
      return Math.abs(dx) > 10;
    },

    onPanResponderMove: (event, gestureState) => {
      // console.log('onPanResponderMove');
      // console.log(
      //   '滑动参数：dx=' + gestureState.dx + '，dy=' + gestureState.dy,
      // );
      // console.log(
      //   '滑动参数：vx=' + gestureState.vx + '，vy=' + gestureState.vy,
      // );
      if (gestureState.vx < -0.6 && Math.abs(gestureState.dy) < 10) {
        this.openRankingList();
      }
    },
  });

  finish = () => {
    Alert.alert('结算确认', '您确定要结束PK并结算成绩吗？', [
      {
        text: '取消',
        onPress: () => console.log('Cancel Pressed'),
        style: 'cancel',
      },
      {
        text: '是的',
        onPress: () => {
          //console.log('OK Pressed');
          clearInterval(this.timer);
          this.props.navigation.navigate('区域PK结算', {
            numberTop: parseInt(this.state.timeInTheMatch / 60, 10),
            numberCentre: 999,
            numberBottom: 9999,
            range: parseRangeID(this.state.rangeID),
          });
        },
      },
    ]);
  };

  render() {
    const {
      user,
      ranking,
      timeInTheMatch,
      rankingFirst,
      rankingSecond,
      rankingThird,
    } = this.state;

    return (
      <View style={styles.container} {...this.panResponder.panHandlers}>
        <MyTitle
          title={'当前的排名为 第' + ranking + '名'}
          containerStyle={styles.containerTitle}
        />
        <View style={styles.containerMain}>
          <MyStatistics
            text={{
              first: {
                top: '用户',
                bottom: user.name,
              },
              second: {
                top: '段位',
                bottom: user.rank,
              },
              third: {
                top: '本次时长',
                bottom: parseMinute(timeInTheMatch) + ' min',
              },
              forth: {
                top: '生涯时长',
                bottom: parseMinute(timeInTheMatch) + user.duration + ' min',
              },
            }}
          />
          <RangePKState range={parseRangeID(this.state.rangeID)} />
          <MyStatistics
            containerStyle={styles.containerOnRight}
            insideStyle={styles.containerInRightColumn}
            textStyle={styles.textOnRight}
            onPress={this.openRankingList}
            text={{
              first: {
                top: parseRangeID(this.state.rangeID) + '区域',
                bottom: 'Top 3',
              },
              second: {
                top: rankingFirst.name,
                bottom: rankingFirst.time + ' min',
              },
              third: {
                top: rankingSecond.name,
                bottom: rankingSecond.time + ' min',
              },
              forth: {
                top: rankingThird.name,
                bottom: rankingThird.time + ' min',
              },
            }}
          />
        </View>
        <View style={styles.containerTimer}>
          <Text style={styles.text}>{'<--'}左滑打开排行榜</Text>
          <Text style={styles.textTimer}>{parseTime(timeInTheMatch)}</Text>
        </View>
        <MyBanner
          containerStyle={styles.myBanner.container}
          title={'结算'}
          onPress={this.finish}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F2E2CE',
    //opacity: 0.5,
    flex: 1,
  },
  containerTitle: {
    flex: 1,
  },
  containerMain: {
    flex: 3,
    flexDirection: 'row',
  },
  containerTimer: {
    justifyContent: 'center',
    flex: 1,
  },
  containerOnRight: {
    borderColor: '#f4cb8c',
    backgroundColor: '#BF7636',
  },
  containerInRightColumn: {
    borderColor: '#f4cb8c',
    backgroundColor: '#BF7636',
  },
  textOnRight: {
    color: '#f2e2ce',
  },
  text: {
    textAlignVertical: 'center',
    color: '#592202',
    fontSize: parseInt(height, 10) / 50,
    fontWeight: '300',
    textAlign: 'center',
  },
  textTimer: {
    textAlignVertical: 'center',
    flex: 1,
    color: '#592202',
    fontSize: parseInt(height, 10) / 12,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  myBanner: {
    container: {
      flex: 2,
    },
  },
});

export default RangePKStudy;