304_addRangePKHome

component/OnlineStudy/2-PlayerPKHome/index.js

@@ -25,13 +25,14 @@ class TwoPlayerPKHome extends Component {
 
   startSearching = () => {
     this.setState({isStarted: true});
-    this.timer = setTimeout(() => {
+    this.timer = setInterval(() => {
       this.checkIfFound();
       const {isFound, opponentID} = this.state;
       if (isFound) {
-        this.props.navigation.navigate('双人PK结算', {opponentID: opponentID});
-        //this.props.navigation.navigate('双人PK中', {opponentID: opponentID});
-        this.setState({isFound: false, IDFound: 0});
+        //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});
     }, 3000);
@@ -39,7 +40,7 @@ class TwoPlayerPKHome extends Component {
 
   cancelSearching = () => {
     clearInterval(this.timer);
-    this.setState({isStarted: false, isFound: false, IDFound: 0});
+    this.setState({isStarted: false, isFound: false, opponentID: 0});
   };
 
   render() {

component/OnlineStudy/2-PlayerPKRecord/index.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import {View, StyleSheet, Dimensions} from 'react-native';
 import MyTitle from '../MyTitle';
 import MyButton from '../MyButton';
+import MyRecord from '../MyRecord';
 
 const {width, height} = Dimensions.get('window');
 
@@ -10,20 +11,33 @@ class TwoPlayerPKRecord extends Component {
     super();
   }
 
+  componentDidMount() {
+    this.props.navigation.setOptions({
+      headerBackVisible: false,
+    });
+  }
+
   confirm = () => {
     this.props.navigation.navigate('联网自习');
   };
 
   render() {
+    const {textTop, textCentre, textBottom} = this.props.route.params;
+
     return (
       <View style={styles.container}>
         <MyTitle
-          containerStyle={styles.myTitleStyle.containerStyle}
+          containerStyle={styles.myTitle.containerStyle}
           title="本次自习结束"
         />
-        <MyButton title="button" />
-        <MyButton title="button" />
-        <MyButton title="button" />
+        <MyRecord
+          containerStyle={styles.myRecord.containerStyle}
+          text={{
+            textTop: '本次您总共学习了' + textTop + '分钟',
+            textCentre: '累计战胜了' + textCentre + '名对手',
+            textBottom: '获得了' + textBottom + '点经验',
+          }}
+        />
         <MyButton
           title="确认"
           buttonStyle={styles.myButton.buttonStyle}
@@ -40,15 +54,15 @@ const styles = StyleSheet.create({
     backgroundColor: '#F2E2CE',
     flex: 1,
   },
-  myTitleStyle: {
+  myTitle: {
     containerStyle: {
       flex: 1,
     },
   },
-  text: {
-    fontSize: 50,
-    fontWeight: 'bold',
-    textAlign: 'center',
+  myRecord: {
+    containerStyle: {
+      flex: 3,
+    },
   },
   myButton: {
     buttonEnabled: {

component/OnlineStudy/2-PlayerPKState/index.js

@@ -9,6 +9,7 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 import Clock from './img/clock1.png';
+import Searching from './img/searching1.png';
 
 const {width, height} = Dimensions.get('window');
 
@@ -52,7 +53,7 @@ class TwoPlayerPKState extends Component {
               {isStarted ? time : '请稍等'}
             </Text>
           </View>
-          <Image source={Clock} style={styles.image} />
+          <Image source={isStarted ? Clock : Searching} style={styles.image} />
         </Pressable>
       </View>
     );

component/OnlineStudy/2-PlayerPKStudy/index.js

@@ -65,7 +65,11 @@ class TwoPlayerPKMode extends Component {
         text: '是的',
         onPress: () => {
           //console.log('OK Pressed');
-          this.props.navigation.navigate('双人PK结算');
+          this.props.navigation.navigate('双人PK结算', {
+            textTop: 999,
+            textCentre: 999,
+            textBottom: 9999,
+          });
         },
       },
     ]);

component/OnlineStudy/MyButton/index.js

@@ -83,7 +83,7 @@ const styles = StyleSheet.create({
   },
   textStyle: {
     flex: 1,
-    fontSize: parseInt(height) / 23,
+    fontSize: parseInt(height) / 28,
     fontWeight: 'bold',
     textAlign: 'center',
     textAlignVertical: 'center',

component/OnlineStudy/MyRecord/index.js

 import React, {Component} from 'react';
-import {View, Text, StyleSheet, Dimensions} from 'react-native';
+import {View, Text, StyleSheet, Dimensions, Pressable} from 'react-native';
 import {Button} from 'react-native-elements';
+import PropTypes from 'prop-types';
 
 const {width, height} = Dimensions.get('window');
 
@@ -9,20 +10,41 @@ class MyRecord extends Component {
     super();
   }
 
-  onlineMode = () => {
-    this.props.navi.navigate('OnlineStudy');
+  static propTypes = {
+    text: PropTypes.exact({
+      textTop: PropTypes.string,
+      textCentre: PropTypes.string,
+      textBottom: PropTypes.string,
+    }),
+    containerStyle: PropTypes.object,
+    buttonStyle: PropTypes.object,
+    textStyle: PropTypes.object,
   };
 
   render() {
+    const {
+      text: {textTop, textCentre, textBottom},
+      containerStyle,
+      buttonStyle,
+      textStyle,
+    } = this.props;
+    const container = {...styles.container, ...containerStyle};
+    const button = {...styles.buttonStyle, ...buttonStyle};
+    const textInside = {...styles.text, ...textStyle};
+
     return (
-      <View style={styles.container}>
-        <Text style={styles.text}>Study自习模块</Text>
-        <Button
-          buttonStyle={styles.buttonStyle}
-          containerStyle={styles.button_containerStyle}
-          title="button"
-          onPress={this.onlineMode}
-        />
+      <View style={container}>
+        <Pressable style={button}>
+          <Text numberOfLines={2} ellipsizeMode={'tail'} style={textInside}>
+            {textTop}
+          </Text>
+          <Text numberOfLines={2} ellipsizeMode={'tail'} style={textInside}>
+            {textCentre}
+          </Text>
+          <Text numberOfLines={2} ellipsizeMode={'tail'} style={textInside}>
+            {textBottom}
+          </Text>
+        </Pressable>
       </View>
     );
   }
@@ -30,22 +52,26 @@ class MyRecord extends Component {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: '#F2E2CE',
+    justifyContent: 'center',
     flex: 1,
   },
   text: {
-    fontSize: 50,
-    fontWeight: 'bold',
+    flex: 1,
+    color: '#592202',
+    fontSize: parseInt(height) / 28,
+    fontWeight: '500',
     textAlign: 'center',
+    marginHorizontal: '8%',
+    marginVertical: '5%',
   },
   buttonStyle: {
-    backgroundColor: '#BF7636',
-    borderRadius: 3,
-  },
-  button_containerStyle: {
-    width: parseInt(width) / 2,
-    marginHorizontal: parseInt(width) / 4,
-    marginVertical: parseInt(width) / 4,
+    alignSelf: 'center',
+    backgroundColor: '#f7dfbe',
+    borderColor: '#bf7636',
+    borderWidth: 2,
+    borderRadius: 20,
+    height: '90%',
+    width: parseInt(width) * 0.75,
   },
 });
 

component/OnlineStudy/MyTitle/index.js

@@ -34,18 +34,15 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   textStyle: {
-    flex: 1,
     marginHorizontal: '5%',
+    marginVertical: '3%',
     fontSize: parseInt(height) / 25,
     color: '#592202',
     fontWeight: 'bold',
-    textAlign: 'center',
-    textAlignVertical: 'center',
   },
   titleStyle: {
     alignSelf: 'center',
-    backgroundColor: '#F2E2CE',
-    height: '65%',
+    backgroundColor: '#f7dfbe',
     borderWidth: 3,
     borderColor: '#BF7636',
   },

component/OnlineStudy/OnlineStudyHome/index.js

@@ -19,6 +19,9 @@ class OnlineStudyHome extends Component {
   twoPlayerPK = () => {
     this.props.navigation.navigate('双人PK');
   };
+  rangePK = () => {
+    this.props.navigation.navigate('区域PK');
+  };
 
   render() {
     return (
@@ -37,7 +40,7 @@ class OnlineStudyHome extends Component {
             color: '#FFFFFF',
             foreground: true,
           }}
-          onPress={this.twoPlayerPK}
+          onPress={this.rangePK}
           style={styles.button}>
           <Image source={require('./img/scene2.png')} style={styles.image} />
         </Pressable>

component/OnlineStudy/RangePKHome/index.js

+import React, {Component} from 'react';
+import {View, Text, StyleSheet, Dimensions, Image} from 'react-native';
+import Located from './img/located1.png';
+import Locating from './img/locating1.png';
+import MyButton from '../MyButton';
+
+const {width, height} = Dimensions.get('window');
+
+class RangePKHome extends Component {
+  constructor() {
+    super();
+  }
+
+  componentWillUnmount() {
+    this.cancelLocating();
+  }
+
+  state = {isStarted: false, isLocated: false, rangeID: 'undefined'};
+
+  checkIfLocated = () => {
+    if (true) {
+      this.setState({isLocated: true});
+    }
+  };
+
+  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});
+    }, 3000);
+  };
+
+  cancelLocating = () => {
+    clearInterval(this.timer);
+    this.setState({isStarted: false, rangeID: 0});
+  };
+
+  startStudy = () => {
+    //this.props.navigation.navigate('');
+    this.props.navigation.navigate('双人PK中', {rangeID: this.state.rangeID});
+  };
+
+  translateRangeID = () => {
+    let {rangeID} = this.state;
+    switch (rangeID) {
+      case 'undefined':
+        rangeID = '未定位';
+        break;
+      case 'x1':
+        rangeID = '西1';
+        break;
+      default:
+        rangeID = 'Error';
+        break;
+    }
+    return rangeID;
+  };
+
+  render() {
+    const {isStarted, isLocated} = this.state;
+    return (
+      <View style={styles.container}>
+        <Image source={isStarted ? Locating : Located} style={styles.image} />
+        <Text numberOfLines={1} style={styles.text}>
+          当前所在区域：{this.translateRangeID()}
+        </Text>
+        {isStarted ? (
+          <MyButton
+            containerStyle={styles.myButton.container}
+            title="取消定位"
+            onPress={this.cancelLocating}
+          />
+        ) : (
+          <MyButton
+            containerStyle={styles.myButton.container}
+            title={isLocated ? '重新定位' : '开始定位'}
+            onPress={this.startLocating}
+          />
+        )}
+        <MyButton
+          disabled={!isLocated || isStarted}
+          containerStyle={styles.myButton.container}
+          title="开始自习"
+          onPress={this.startStudy}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#F2E2CE',
+    //opacity: 0.5,
+    flex: 1,
+  },
+  text: {
+    flex: 1,
+    color: '#592202',
+    fontWeight: '400',
+    fontSize: parseInt(height) / 35,
+    textAlign: 'center',
+  },
+  image: {
+    width: null,
+    height: null,
+    flex: 9,
+  },
+  myButton: {
+    container: {
+      flex: 3,
+    },
+  },
+});
+
+export default RangePKHome;

component/OnlineStudy/index.js

@@ -6,7 +6,8 @@ import OnlineStudyHome from './OnlineStudyHome';
 import TwoPlayerPKHome from './2-PlayerPKHome';
 import TwoPlayerPKMode from './2-PlayerPKStudy';
 import BannerStyle from './BannerStyle';
-import TwoPlayerPKRecord from "./2-PlayerPKRecord";
+import TwoPlayerPKRecord from './2-PlayerPKRecord';
+import RangePKHome from "./RangePKHome";
 
 const {width, height} = Dimensions.get('window');
 
@@ -31,11 +32,13 @@ class OnlineStudy extends Component {
               fontSize: 20,
               fontWeight: 'bold',
             },
+            headerTitleAlign: 'center',
           }}>
           <Stack.Screen name="联网自习" component={OnlineStudyHome} />
           <Stack.Screen name="双人PK" component={TwoPlayerPKHome} />
           <Stack.Screen name="双人PK中" component={TwoPlayerPKMode} />
           <Stack.Screen name="双人PK结算" component={TwoPlayerPKRecord} />
+          <Stack.Screen name="区域PK" component={RangePKHome} />
           <Stack.Screen name="标语风格切换" component={BannerStyle} />
         </Stack.Navigator>
       </NavigationContainer>