304_addRangePKStudy

0258131f · ItbGcthate · 3a765eb6 · 0258131f · 0258131f · 0258131f
14 changed file
--- a/component/OnlineStudy/2-PlayerPKHome/index.js
+++ b/component/OnlineStudy/2-PlayerPKHome/index.js
@@ -15,32 +15,28 @@ class TwoPlayerPKHome extends Component {
    this.cancelSearching();
  }

-  state = {isStarted: false, isFound: false, opponentID: 0};
+  state = {isStarted: false, opponentID: 0};

-  checkIfFound = () => {
+  ifFound = () => {
+    const {opponentID} = this.state;
    if (true) {
-      this.setState({isFound: true});
+      //this.props.navigation.navigate('双人PK结算');
+      this.props.navigation.navigate('双人PK中', {opponentID: opponentID});
+      this.setState({isStarted: false, opponentID: 0});
+      clearInterval(this.timer);
    }
  };

  startSearching = () => {
    this.setState({isStarted: true});
    this.timer = setInterval(() => {
-      this.checkIfFound();
-      const {isFound, opponentID} = this.state;
-      if (isFound) {
-        //this.props.navigation.navigate('双人PK结算');
-        this.props.navigation.navigate('双人PK中', {opponentID: opponentID});
-        this.setState({isStarted: false, isFound: false, opponentID: 0});
-        clearInterval(this.timer);
-      }
-      this.setState({isStarted: false});
+      this.ifFound();
    }, 3000);
  };

  cancelSearching = () => {
    clearInterval(this.timer);
-    this.setState({isStarted: false, isFound: false, opponentID: 0});
+    this.setState({isStarted: false, opponentID: 0});
  };

  render() {

--- a/component/OnlineStudy/2-PlayerPKRecord/index.js
+++ b/component/OnlineStudy/2-PlayerPKRecord/index.js
 import React, {Component} from 'react';
-import {View, StyleSheet, Dimensions} from 'react-native';
+import {View, StyleSheet} from 'react-native';
 import MyTitle from '../MyTitle';
 import MyButton from '../MyButton';
 import MyRecord from '../MyRecord';

-const {width, height} = Dimensions.get('window');
-
 class TwoPlayerPKRecord extends Component {
  constructor() {
    super();
@@ -22,7 +20,7 @@ class TwoPlayerPKRecord extends Component {
  };

  render() {
-    const {textTop, textCentre, textBottom} = this.props.route.params;
+    const {numberTop, numberCentre, numberBottom} = this.props.route.params;

    return (
      <View style={styles.container}>
@@ -33,9 +31,9 @@ class TwoPlayerPKRecord extends Component {
        <MyRecord
          containerStyle={styles.myRecord.containerStyle}
          text={{
-            textTop: '本次您总共学习了' + textTop + '分钟',
-            textCentre: '累计战胜了' + textCentre + '名对手',
-            textBottom: '获得了' + textBottom + '点经验',
+            textTop: '本次您总共学习了 ' + numberTop + ' 分钟',
+            textCentre: '累计战胜了 ' + numberCentre + ' 名对手',
+            textBottom: '获得了 ' + numberBottom + ' 点经验',
          }}
        />
        <MyButton

--- a/component/OnlineStudy/2-PlayerPKState/index.js
+++ b/component/OnlineStudy/2-PlayerPKState/index.js
@@ -70,7 +70,6 @@ const styles = StyleSheet.create({
    borderWidth: 3,
    borderColor: '#BF7636',
    backgroundColor: '#F2E2CE',
-    //opacity: 0.5,
    marginBottom: '20%',
    flex: 1,
  },
@@ -79,13 +78,13 @@ const styles = StyleSheet.create({
    flex: 1,
  },
  text: {
-    fontSize: 18,
+    fontSize: parseInt(height, 10) / 40,
    color: '#BF7636',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  textTime: {
-    fontSize: 30,
+    fontSize: parseInt(height, 10) / 30,
    color: '#BF7636',
    fontWeight: '900',
    textAlign: 'center',

--- a/component/OnlineStudy/2-PlayerPKStudy/index.js
+++ b/component/OnlineStudy/2-PlayerPKStudy/index.js
@@ -19,7 +19,7 @@ const {width, height} = Dimensions.get('window');
 * 1. componentDidMount()
 * 2. componentWillUnmount()
 */
-class TwoPlayerPKMode extends Component {
+class TwoPlayerPKStudy extends Component {
  constructor() {
    super();
  }
@@ -60,12 +60,16 @@ class TwoPlayerPKMode extends Component {
    clearInterval(this.timer);
  }

-  translateTime = time => {
+  parseTime = time => {
    const minute = parseInt(time / 60, 10);
    const second = time % 60;
    return minute.toString() + ':' + second.toString();
  };

+  parseMinute = time => {
+    return parseInt(time / 60, 10).toString();
+  };
+
  calculateTime = () => {
    const {timeInAGame, timeInAMatch} = this.state;
    this.setState({
@@ -91,10 +95,11 @@ class TwoPlayerPKMode extends Component {
        text: '是的',
        onPress: () => {
          //console.log('OK Pressed');
+          clearInterval(this.timer);
          this.props.navigation.navigate('双人PK结算', {
-            textTop: parseInt(this.state.timeInAMatch / 60, 10),
-            textCentre: 999,
-            textBottom: 9999,
+            numberTop: parseInt(this.state.timeInAMatch / 60, 10),
+            numberCentre: 999,
+            numberBottom: 9999,
          });
        },
      },
@@ -111,20 +116,57 @@ class TwoPlayerPKMode extends Component {
          containerStyle={styles.containerTitle}
        />
        <View style={styles.containerMain}>
-          <MyStatistics />
+          <MyStatistics
+            text={{
+              first: {
+                top: '用户',
+                bottom: 'name',
+              },
+              second: {
+                top: '段位',
+                bottom: '黄金',
+              },
+              third: {
+                top: '本次时长',
+                bottom: this.parseMinute(timeInAMatch) + ' min',
+              },
+              forth: {
+                top: '生涯时长',
+                bottom: '1' + ' min',
+              },
+            }}
+          />
          <TwoPlayerPKState
            isStarted={isStarted}
-            time={this.translateTime(timeInAGame)}
+            time={this.parseTime(timeInAGame)}
          />
          <MyStatistics
            containerStyle={styles.containerOnRight}
            insideStyle={styles.containerInRightColumn}
            textStyle={styles.textOnRight}
+            text={{
+              first: {
+                top: '用户',
+                bottom: 'name',
+              },
+              second: {
+                top: '段位',
+                bottom: '黄金',
+              },
+              third: {
+                top: '本次时长',
+                bottom: '1' + ' min',
+              },
+              forth: {
+                top: '生涯时长',
+                bottom: '1' + ' min',
+              },
+            }}
          />
        </View>
        <View style={styles.containerTimer}>
          <Text style={styles.textTimer}>
-            {this.translateTime(timeInAMatch)}
+            {this.parseTime(timeInAMatch)}
          </Text>
        </View>
        <MyBanner
@@ -163,7 +205,7 @@ const styles = StyleSheet.create({
    backgroundColor: '#BF7636',
  },
  textOnRight: {
-    color: '#f4cb8c',
+    color: '#f2e2ce',
  },
  textTimer: {
    textAlignVertical: 'center',
@@ -173,11 +215,6 @@ const styles = StyleSheet.create({
    fontWeight: 'bold',
    textAlign: 'center',
  },
-  text: {
-    fontSize: 10,
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
  myButton: {
    container: {
      flex: 2,
@@ -185,4 +222,4 @@ const styles = StyleSheet.create({
  },
 });

-export default TwoPlayerPKMode;
+export default TwoPlayerPKStudy;
--- a/component/OnlineStudy/MyStatistics/index.js
+++ b/component/OnlineStudy/MyStatistics/index.js
@@ -14,28 +14,96 @@ class MyStatistics extends Component {
    buttonStyle: PropTypes.object,
    insideStyle: PropTypes.object,
    textStyle: PropTypes.object,
+    onPress: PropTypes.func,
+    text: PropTypes.exact({
+      first: PropTypes.exact({
+        top: PropTypes.string,
+        bottom: PropTypes.string,
+      }),
+      second: PropTypes.exact({
+        top: PropTypes.string,
+        bottom: PropTypes.string,
+      }),
+      third: PropTypes.exact({
+        top: PropTypes.string,
+        bottom: PropTypes.string,
+      }),
+      forth: PropTypes.exact({
+        top: PropTypes.string,
+        bottom: PropTypes.string,
+      }),
+    }),
  };

  render() {
-    const {containerStyle, buttonStyle, insideStyle, textStyle} = this.props;
+    const {
+      containerStyle,
+      buttonStyle,
+      insideStyle,
+      textStyle,
+      onPress,
+      text: {first, second, third, forth},
+    } = this.props;

    return (
      <View style={{...styles.container, ...containerStyle}}>
-        <Pressable style={{...styles.buttonStyle, ...buttonStyle}}>
+        <Pressable
+          style={{...styles.buttonStyle, ...buttonStyle}}
+          onPress={onPress}>
          <View style={{...styles.containerInside, ...insideStyle}}>
-            <Text style={{...styles.text, ...textStyle}}>user:{'\n'}self</Text>
+            <Text
+              numberOfLines={1}
+              ellipsizeMode={'tail'}
+              style={{...styles.text, ...textStyle}}>
+              {first.top}
+            </Text>
+            <Text
+              numberOfLines={1}
+              ellipsizeMode={'tail'}
+              style={{...styles.text, ...textStyle}}>
+              {first.bottom}
+            </Text>
          </View>
          <View style={{...styles.containerInside, ...insideStyle}}>
-            <Text style={{...styles.text, ...textStyle}}>level:{'\n'}gold</Text>
+            <Text
+              numberOfLines={1}
+              ellipsizeMode={'tail'}
+              style={{...styles.text, ...textStyle}}>
+              {second.top}
+            </Text>
+            <Text
+              numberOfLines={1}
+              ellipsizeMode={'tail'}
+              style={{...styles.text, ...textStyle}}>
+              {second.bottom}
+            </Text>
          </View>
          <View style={{...styles.containerInside, ...insideStyle}}>
-            <Text style={{...styles.text, ...textStyle}}>
-              this turn:{'\n'}1919min
+            <Text
+              numberOfLines={1}
+              ellipsizeMode={'tail'}
+              style={{...styles.text, ...textStyle}}>
+              {third.top}
+            </Text>
+            <Text
+              numberOfLines={1}
+              ellipsizeMode={'tail'}
+              style={{...styles.text, ...textStyle}}>
+              {third.bottom}
            </Text>
          </View>
          <View style={{...styles.containerInside, ...insideStyle}}>
-            <Text style={{...styles.text, ...textStyle}}>
-              this turn:{'\n'}1919min
+            <Text
+              numberOfLines={1}
+              ellipsizeMode={'tail'}
+              style={{...styles.text, ...textStyle}}>
+              {forth.top}
+            </Text>
+            <Text
+              numberOfLines={1}
+              ellipsizeMode={'tail'}
+              style={{...styles.text, ...textStyle}}>
+              {forth.bottom}
            </Text>
          </View>
        </Pressable>
@@ -63,7 +131,7 @@ const styles = StyleSheet.create({
    flex: 1,
  },
  text: {
-    fontSize: 18,
+    fontSize: parseInt(height, 10) / 45,
    color: '#BF7636',
    fontWeight: 'bold',
    textAlign: 'center',

--- a/component/OnlineStudy/RangPKRankingList/index.js
+++ b/component/OnlineStudy/RangPKRankingList/index.js
+import React, {Component} from 'react';
+import {StyleSheet, View} from 'react-native';
+import {Table, Row, Rows} from 'react-native-table-component';
+
+class RangePKRankingList extends Component {
+  constructor() {
+    super();
+  }
+
+  state = {
+    tableHead: ['Head', 'Head2', 'Head3', 'Head4'],
+    tableData: [
+      ['1', '2', '3', '4'],
+      ['a', 'b', 'c', 'd'],
+      ['1', '2', '3', '456\n789'],
+      ['a', 'b', 'c', 'd'],
+    ],
+  };
+
+  render() {
+    const state = this.state;
+    return (
+      <View style={styles.container}>
+        <Table borderStyle={styles.borderStyle}>
+          <Row
+            data={state.tableHead}
+            style={styles.head}
+            textStyle={styles.text}
+          />
+          <Rows
+            data={state.tableData}
+            style={styles.head}
+            textStyle={styles.text}
+          />
+        </Table>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+    paddingTop: 30,
+    backgroundColor: '#F2E2CE',
+  },
+  borderStyle: {borderWidth: 2, borderColor: '#c8e1ff'},
+  head: {height: 40, backgroundColor: '#f1f8ff'},
+  text: {margin: 6},
+});
+
+export default RangePKRankingList;
--- a/component/OnlineStudy/RangePKHome/index.js
+++ b/component/OnlineStudy/RangePKHome/index.js
@@ -17,35 +17,31 @@ class RangePKHome extends Component {

  state = {isStarted: false, isLocated: false, rangeID: 'undefined'};

-  checkIfLocated = () => {
+  locate = () => {
    if (true) {
-      this.setState({isLocated: true});
+      this.setState({isStarted: false, isLocated: true, rangeID: 'x1'});
+      clearInterval(this.timer);
    }
  };

  startLocating = () => {
    this.setState({isStarted: true});
    this.timer = setInterval(() => {
-      this.checkIfLocated();
-      if (this.state.isLocated) {
-        this.setState({isStarted: false});
-        clearInterval(this.timer);
-      }
-      this.setState({isStarted: false});
+      this.locate();
    }, 3000);
  };

  cancelLocating = () => {
    clearInterval(this.timer);
-    this.setState({isStarted: false, rangeID: 0});
+    this.setState({isStarted: false});
  };

  startStudy = () => {
    //this.props.navigation.navigate('');
-    this.props.navigation.navigate('双人PK中', {rangeID: this.state.rangeID});
+    this.props.navigation.navigate('区域PK中', {rangeID: this.state.rangeID});
  };

-  translateRangeID = () => {
+  parseRangeID = () => {
    let {rangeID} = this.state;
    switch (rangeID) {
      case 'undefined':
@@ -67,7 +63,7 @@ class RangePKHome extends Component {
      <View style={styles.container}>
        <Image source={isStarted ? Locating : Located} style={styles.image} />
        <Text numberOfLines={1} style={styles.text}>
-          当前所在区域：{this.translateRangeID()}
+          当前所在区域：{this.parseRangeID()}
        </Text>
        {isStarted ? (
          <MyButton

--- a/component/OnlineStudy/RangePKRecord/index.js
+++ b/component/OnlineStudy/RangePKRecord/index.js
+import React, {Component} from 'react';
+import {View, StyleSheet} from 'react-native';
+import MyTitle from '../MyTitle';
+import MyButton from '../MyButton';
+import MyRecord from '../MyRecord';
+
+class RangePKRecord extends Component {
+  constructor() {
+    super();
+  }
+
+  componentDidMount() {
+    this.props.navigation.setOptions({
+      headerBackVisible: false,
+    });
+  }
+
+  confirm = () => {
+    this.props.navigation.navigate('联网自习');
+  };
+
+  render() {
+    const {numberTop, numberCentre, numberBottom, range} =
+      this.props.route.params;
+
+    return (
+      <View style={styles.container}>
+        <MyTitle
+          containerStyle={styles.myTitle.containerStyle}
+          title="本次自习结束"
+        />
+        <MyRecord
+          containerStyle={styles.myRecord.containerStyle}
+          text={{
+            textTop: '本次您总共学习了 ' + numberTop + ' 分钟',
+            textCentre: '在 ' + range + ' 区域的排名是 ' + numberCentre,
+            textBottom: '获得了 ' + numberBottom + ' 点经验',
+          }}
+        />
+        <MyButton
+          title="确认"
+          buttonStyle={styles.myButton.buttonStyle}
+          buttonEnabled={styles.myButton.buttonEnabled}
+          onPress={this.confirm}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#F2E2CE',
+    flex: 1,
+  },
+  myTitle: {
+    containerStyle: {
+      flex: 1,
+    },
+  },
+  myRecord: {
+    containerStyle: {
+      flex: 3,
+    },
+  },
+  myButton: {
+    buttonEnabled: {
+      backgroundColor: '#e1c2a1',
+      borderColor: '#bf7636',
+    },
+    buttonStyle: {
+      width: '60%',
+      borderRadius: 10,
+      borderWidth: 3,
+    },
+  },
+});
+
+export default RangePKRecord;
--- a/component/OnlineStudy/RangePKState/img/clock1.png
+++ b/component/OnlineStudy/RangePKState/img/clock1.png
--- a/component/OnlineStudy/RangePKState/index.js
+++ b/component/OnlineStudy/RangePKState/index.js
+import React, {Component} from 'react';
+import {
+  View,
+  StyleSheet,
+  Pressable,
+  Image,
+  Text,
+  Dimensions,
+} from 'react-native';
+import PropTypes from 'prop-types';
+import Clock from './img/clock1.png';
+
+const {width, height} = Dimensions.get('window');
+
+class RangePKState extends Component {
+  constructor() {
+    super();
+  }
+
+  static propTypes = {
+    range: PropTypes.string,
+    containerStyle: PropTypes.object,
+    buttonStyle: PropTypes.object,
+    insideStyle: PropTypes.object,
+    textStyle: PropTypes.object,
+  };
+
+  render() {
+    const {containerStyle, buttonStyle, insideStyle, textStyle, range} =
+      this.props;
+
+    return (
+      <View style={{...styles.container, ...containerStyle}}>
+        <Pressable style={{...styles.buttonStyle, ...buttonStyle}}>
+          <View style={{...styles.containerInside, ...insideStyle}}>
+            <Text style={{...styles.text, ...textStyle}}>所在区域</Text>
+          </View>
+          <View style={{...styles.containerCentre}}>
+            <Text
+              style={{...styles.textCentre}}
+              numberOfLines={1}
+              ellipsizeMode={'clip'}>
+              {range}
+            </Text>
+          </View>
+          <Image source={Clock} style={styles.image} />
+        </Pressable>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    margin: 3,
+  },
+  containerInside: {
+    justifyContent: 'center',
+    borderWidth: 3,
+    borderColor: '#BF7636',
+    backgroundColor: '#F2E2CE',
+    marginBottom: '20%',
+    flex: 1,
+  },
+  containerCentre: {
+    justifyContent: 'center',
+    flex: 1,
+  },
+  text: {
+    fontSize: parseInt(height, 10) / 40,
+    color: '#BF7636',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  textCentre: {
+    fontSize: parseInt(height, 10) / 30,
+    color: '#BF7636',
+    fontWeight: '900',
+    textAlign: 'center',
+  },
+  image: {
+    marginTop: '20%',
+    opacity: 0.5,
+    flex: 2,
+    resizeMode: 'contain',
+    width: null,
+    height: null,
+  },
+  buttonStyle: {
+    borderRadius: 3,
+    flex: 1,
+    margin: 10,
+  },
+});
+
+export default RangePKState;
--- a/component/OnlineStudy/RangePKStudy/index.js
+++ b/component/OnlineStudy/RangePKStudy/index.js
+import React, {Component} from 'react';
+import {View, Text, StyleSheet, Dimensions, Alert} from 'react-native';
+import MyStatistics from '../MyStatistics';
+import MyTitle from '../MyTitle';
+import SettingButton from '../SettingButton';
+import MyBanner from '../MyBanner';
+import TwoPlayerPKState from '../2-PlayerPKState';
+import RangePKState from '../RangePKState';
+import MyButton from '../MyButton';
+
+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,
+    ranking: 1,
+    timeInAMatch: 0,
+  };
+
+  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 (typeof params.rangeID !== 'undefined') {
+      this.setState({rangeID: params.rangeID});
+    }
+    this.startTimer();
+  }
+
+  componentWillUnmount() {
+    this.unsubscribe();
+    // 以下不是标语风格切换相关
+    clearInterval(this.timer);
+  }
+
+  parseTime = time => {
+    const minute = parseInt(time / 60, 10);
+    const second = time % 60;
+    return minute.toString() + ':' + second.toString();
+  };
+
+  parseMinute = time => {
+    return parseInt(time / 60, 10).toString();
+  };
+
+  calculateTime = () => {
+    const {timeInAGame, timeInAMatch} = this.state;
+    this.setState({
+      timeInAGame: timeInAGame + 1,
+      timeInAMatch: timeInAMatch + 1,
+    });
+  };
+
+  startTimer = () => {
+    this.timer = setInterval(() => {
+      this.calculateTime();
+    }, 1000);
+  };
+
+  parseRangeID = () => {
+    let {rangeID} = this.state;
+    switch (rangeID) {
+      case 'undefined':
+        rangeID = '未定位';
+        break;
+      case 'x1':
+        rangeID = '西1';
+        break;
+      default:
+        rangeID = 'Error';
+        break;
+    }
+    return rangeID;
+  };
+
+  openRankingList = () => {
+    this.props.navigation.navigate('区域排行榜');
+  };
+
+  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.timeInAMatch / 60, 10),
+            numberCentre: 999,
+            numberBottom: 9999,
+            range: this.parseRangeID(),
+          });
+        },
+      },
+    ]);
+  };
+
+  render() {
+    const {ranking, timeInAMatch} = this.state;
+
+    return (
+      <View style={styles.container}>
+        <MyTitle
+          title={'当前的排名为 第' + ranking + '名'}
+          containerStyle={styles.containerTitle}
+        />
+        <View style={styles.containerMain}>
+          <MyStatistics
+            text={{
+              first: {
+                top: '用户',
+                bottom: 'name',
+              },
+              second: {
+                top: '段位',
+                bottom: '黄金',
+              },
+              third: {
+                top: '本次时长',
+                bottom: this.parseMinute(timeInAMatch) + ' min',
+              },
+              forth: {
+                top: '生涯时长',
+                bottom: '1' + ' min',
+              },
+            }}
+          />
+          <RangePKState range={this.parseRangeID()} />
+          <MyStatistics
+            containerStyle={styles.containerOnRight}
+            insideStyle={styles.containerInRightColumn}
+            textStyle={styles.textOnRight}
+            onPress={this.openRankingList}
+            text={{
+              first: {
+                top: 'Top 3',
+                bottom: '在排行榜',
+              },
+              second: {
+                top: '老王',
+                bottom: '1' + ' min',
+              },
+              third: {
+                top: '老王',
+                bottom: '1' + ' min',
+              },
+              forth: {
+                top: '老王',
+                bottom: '1' + ' min',
+              },
+            }}
+          />
+        </View>
+        <View style={styles.containerTimer}>
+          <Text style={styles.textTimer}>{this.parseTime(timeInAMatch)}</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',
+  },
+  textTimer: {
+    textAlignVertical: 'center',
+    flex: 1,
+    color: '#592202',
+    fontSize: parseInt(height, 10) / 12,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  myBanner: {
+    container: {
+      flex: 2,
+    },
+  },
+});
+
+export default RangePKStudy;
--- a/component/OnlineStudy/index.js
+++ b/component/OnlineStudy/index.js
@@ -3,10 +3,13 @@ import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import {NavigationContainer} from '@react-navigation/native';
 import OnlineStudyHome from './OnlineStudyHome';
 import TwoPlayerPKHome from './2-PlayerPKHome';
-import TwoPlayerPKMode from './2-PlayerPKStudy';
+import TwoPlayerPKStudy from './2-PlayerPKStudy';
 import BannerStyle from './BannerStyle';
 import TwoPlayerPKRecord from './2-PlayerPKRecord';
 import RangePKHome from './RangePKHome';
+import RangePKStudy from './RangePKStudy';
+import RangePKRecord from './RangePKRecord';
+import RangePKRankingList from "./RangPKRankingList";

 class OnlineStudy extends Component {
  constructor() {
@@ -33,9 +36,12 @@ class OnlineStudy extends Component {
          }}>
          <Stack.Screen name="联网自习" component={OnlineStudyHome} />
          <Stack.Screen name="双人PK" component={TwoPlayerPKHome} />
-          <Stack.Screen name="双人PK中" component={TwoPlayerPKMode} />
+          <Stack.Screen name="双人PK中" component={TwoPlayerPKStudy} />
          <Stack.Screen name="双人PK结算" component={TwoPlayerPKRecord} />
          <Stack.Screen name="区域PK" component={RangePKHome} />
+          <Stack.Screen name="区域PK中" component={RangePKStudy} />
+          <Stack.Screen name="区域PK结算" component={RangePKRecord} />
+          <Stack.Screen name="区域排行榜" component={RangePKRankingList} />
          <Stack.Screen name="标语风格切换" component={BannerStyle} />
        </Stack.Navigator>
      </NavigationContainer>

--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
    "react-native-screens": "^3.13.1",
    "react-native-splash-screen": "^3.3.0",
    "react-native-tab-navigator": "^0.3.4",
+    "react-native-table-component": "^1.2.2",
    "react-native-vector-icons": "^9.1.0"
  },
  "devDependencies": {

--- a/yarn.lock
+++ b/yarn.lock
@@ -5810,6 +5810,11 @@ react-native-tab-navigator@^0.3.4:
    immutable "^3.8.1"
    prop-types "^15.5.10"

+react-native-table-component@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.npmmirror.com/react-native-table-component/-/react-native-table-component-1.2.2.tgz#1c9bdcd8f1fd7edf10d1e93ebc3b7877ecd74def"
+  integrity sha512-7bbsi5431iWcjj3toASh8lFHGi6AG/+MTd4M7GuksXKxx/CFs/Qwv1Ys7D2wgyuYKe3hxWNfSVrteFj0tOYXYw==
+
 react-native-vector-icons@^9.1.0:
  version "9.1.0"
  resolved "https://registry.npmmirror.com/react-native-vector-icons/-/react-native-vector-icons-9.1.0.tgz#52eaa205f5954d567b7048eb93d58ac854a2c59e"