304_add geolocation

android/app/src/main/AndroidManifest.xml

@@ -2,6 +2,8 @@
   package="com.fzustudyroom">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
 
     <application
       android:name=".MainApplication"

component/OnlineStudy/RangPKRankingList/index.js

 import React, {Component} from 'react';
-import {StyleSheet, View} from 'react-native';
+import {
+  Dimensions,
+  PanResponder,
+  ScrollView,
+  StyleSheet,
+  View,
+} from 'react-native';
 import {Table, Row, Rows} from 'react-native-table-component';
 
+const {width, height} = Dimensions.get('window');
+
 class RangePKRankingList extends Component {
   constructor() {
     super();
   }
 
+  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.props.navigation.goBack();
+      }
+    },
+  });
+
+  componentDidMount() {
+    const {navigation} = this.props;
+
+    navigation.setOptions({
+      animation: 'slide_from_right',
+    });
+  }
+
   state = {
-    tableHead: ['Head', 'Head2', 'Head3', 'Head4'],
+    widthArr: [
+      (parseInt(width, 10) / 7) * 1,
+      (parseInt(width, 10) / 7) * 4,
+      (parseInt(width, 10) / 7) * 2,
+    ],
+    tableHead: ['排名', '用户', '时长（min）'],
     tableData: [
-      ['1', '2', '3', '4'],
-      ['a', 'b', 'c', 'd'],
-      ['1', '2', '3', '456\n789'],
-      ['a', 'b', 'c', 'd'],
+      ['1', '2', '3'],
+      ['a', 'b', 'c'],
+      ['1', '2', '3\n4'],
+      ['a', 'b', 'c'],
+      ['1', '2', '3'],
+      ['a', 'b', 'c'],
+      ['1', '2', '3\n4'],
+      ['a', 'b', 'c'],
+      ['1', '2', '3'],
+      ['a', 'b', 'c'],
+      ['1', '2', '3\n4'],
+      ['a', 'b', 'c'],
+      ['1', '2', '3'],
+      ['a', 'b', 'c'],
+      ['1', '2', '3\n4'],
+      ['a', 'b', 'c'],
+      ['1', '2', '3'],
+      ['a', 'b', 'c'],
+      ['1', '2', '3\n4'],
+      ['a', 'b', 'c'],
+      ['a', 'b', 'c'],
+      ['1', '2', '3'],
+      ['a', 'b', 'c'],
+      ['1', '2', '3\n4'],
+      ['a', 'b', 'c'],
     ],
   };
 
   render() {
     const state = this.state;
     return (
-      <View style={styles.container}>
+      <View style={styles.container} {...this.panResponder.panHandlers}>
         <Table borderStyle={styles.borderStyle}>
           <Row
+            widthArr={state.widthArr}
             data={state.tableHead}
             style={styles.head}
-            textStyle={styles.text}
-          />
-          <Rows
-            data={state.tableData}
-            style={styles.head}
-            textStyle={styles.text}
+            textStyle={styles.textHead}
           />
         </Table>
+        <ScrollView>
+          <Table borderStyle={styles.borderStyle}>
+            <Rows
+              widthArr={state.widthArr}
+              data={state.tableData}
+              style={styles.body}
+              textStyle={styles.textBody}
+            />
+          </Table>
+        </ScrollView>
       </View>
     );
   }
@@ -41,13 +111,32 @@ class RangePKRankingList extends Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    padding: 16,
-    paddingTop: 30,
+  },
+  borderStyle: {
+    borderWidth: 1,
+    borderColor: '#BF7636',
+  },
+  head: {
+    backgroundColor: '#f4cb8c',
+  },
+  body: {
     backgroundColor: '#F2E2CE',
   },
-  borderStyle: {borderWidth: 2, borderColor: '#c8e1ff'},
-  head: {height: 40, backgroundColor: '#f1f8ff'},
-  text: {margin: 6},
+  textHead: {
+    color: '#BF7636',
+    fontSize: parseInt(height, 10) / 48,
+    marginHorizontal: 5,
+    marginVertical: 20,
+    fontWeight: '700',
+    textAlign: 'center',
+  },
+  textBody: {
+    color: '#BF7636',
+    fontSize: parseInt(height, 10) / 48,
+    margin: 5,
+    fontWeight: '400',
+    textAlign: 'center',
+  },
 });
 
 export default RangePKRankingList;

component/OnlineStudy/RangePKHome/index.js

 import React, {Component} from 'react';
-import {View, Text, StyleSheet, Dimensions, Image} from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Dimensions,
+  Image,
+  ToastAndroid,
+  PermissionsAndroid,
+  Platform,
+} from 'react-native';
 import Located from './img/located1.png';
 import Locating from './img/locating1.png';
 import MyButton from '../MyButton';
+import Geolocation from '@react-native-community/geolocation';
 
 const {width, height} = Dimensions.get('window');
+const config = {
+  skipPermissionRequests: false,
+  authorizationLevel: 'auto',
+};
+
+Geolocation.setRNConfiguration(config);
 
 class RangePKHome extends Component {
   constructor() {
@@ -12,29 +28,94 @@ class RangePKHome extends Component {
   }
 
   componentWillUnmount() {
-    this.cancelLocating();
+    // this.cancelLocating();
+    // 卸载异步操作设置状态
+    this.setState = (state, callback) => {
+      return;
+    };
   }
 
-  state = {isStarted: false, isLocated: false, rangeID: 'undefined'};
+  state = {
+    isStarted: false,
+    isLocated: false,
+    rangeID: undefined,
+    longitude: undefined,
+    latitude: undefined,
+  };
+
+  getPositions = () => {
+    //获取位置再得到城市先后顺序，通过Promise完成
+    return new Promise((resolve, reject) => {
+      Geolocation.getCurrentPosition(
+        location => {
+          const rangID = this.parseLocation();
+          // this.setState({isStarted: false, isLocated: true, rangeID: rangID});
+          this.setState({
+            isStarted: false,
+            isLocated: true,
+            rangeID: rangID,
+            longitude: location.coords.longitude, //经度
+            latitude: location.coords.latitude, //纬度
+          });
+        },
+        error => {
+          reject(error);
+          this.setState({isStarted: false});
+          if (error.code == 2) {
+            ToastAndroid.show(
+              '定位失败，请查看手机是否开启GPS定位服务',
+              ToastAndroid.SHORT,
+            );
+          } else if (error.code == 3) {
+            ToastAndroid.show(
+              '定位超时，请尝试重新获取定位',
+              ToastAndroid.SHORT,
+            );
+          } else {
+            ToastAndroid.show('定位失败：' + error.message, ToastAndroid.SHORT);
+          }
+        },
+        {
+          enableHighAccuracy: true,
+          timeout: 5000,
+          maximumAge: 10000,
+        },
+      );
+    });
+  };
 
-  locate = () => {
-    if (true) {
-      this.setState({isStarted: false, isLocated: true, rangeID: 'x1'});
-      clearInterval(this.timer);
+  geoLocate = async () => {
+    if (Platform.OS === 'ios') {
+      await this.getPositions();
+    } else {
+      const permissions = [PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION];
+      const granted = await PermissionsAndroid.requestMultiple(permissions);
+      if (granted['android.permission.ACCESS_FINE_LOCATION'] === 'granted') {
+        await this.getPositions().catch(e => {});
+      } else {
+        ToastAndroid.show('定位权限被禁止', ToastAndroid.SHORT);
+      }
     }
   };
 
+  parseLocation = () => {
+    console.log(
+      'longitude: ' +
+        this.state.longitude +
+        ' latitude: ' +
+        this.state.latitude,
+    );
+    return 'x1';
+  };
+
   startLocating = () => {
     this.setState({isStarted: true});
-    this.timer = setInterval(() => {
-      this.locate();
-    }, 3000);
+    this.geoLocate().then(r => {});
   };
 
-  cancelLocating = () => {
-    clearInterval(this.timer);
-    this.setState({isStarted: false});
-  };
+  // cancelLocating = () => {
+  //   this.setState({isStarted: false});
+  // };
 
   startStudy = () => {
     //this.props.navigation.navigate('');
@@ -44,7 +125,7 @@ class RangePKHome extends Component {
   parseRangeID = () => {
     let {rangeID} = this.state;
     switch (rangeID) {
-      case 'undefined':
+      case undefined:
         rangeID = '未定位';
         break;
       case 'x1':
@@ -68,8 +149,9 @@ class RangePKHome extends Component {
         {isStarted ? (
           <MyButton
             containerStyle={styles.myButton.container}
-            title="取消定位"
-            onPress={this.cancelLocating}
+            disabled={true}
+            title="定位中"
+            // onPress={this.cancelLocating}
           />
         ) : (
           <MyButton

component/OnlineStudy/RangePKStudy/index.js

 import React, {Component} from 'react';
-import {View, Text, StyleSheet, Dimensions, Alert} from 'react-native';
+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 TwoPlayerPKState from '../2-PlayerPKState';
 import RangePKState from '../RangePKState';
-import MyButton from '../MyButton';
 
 const {width, height} = Dimensions.get('window');
 /**
@@ -104,6 +109,28 @@ class RangePKStudy extends Component {
     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并结算成绩吗？', [
       {
@@ -131,7 +158,7 @@ class RangePKStudy extends Component {
     const {ranking, timeInAMatch} = this.state;
 
     return (
-      <View style={styles.container}>
+      <View style={styles.container} {...this.panResponder.panHandlers}>
         <MyTitle
           title={'当前的排名为 第' + ranking + '名'}
           containerStyle={styles.containerTitle}
@@ -165,8 +192,8 @@ class RangePKStudy extends Component {
             onPress={this.openRankingList}
             text={{
               first: {
-                top: 'Top 3',
-                bottom: '在排行榜',
+                top: '区域',
+                bottom: 'Top 3',
               },
               second: {
                 top: '老王',
@@ -184,6 +211,7 @@ class RangePKStudy extends Component {
           />
         </View>
         <View style={styles.containerTimer}>
+          <Text style={styles.text}>{'<--'}左滑打开排行榜</Text>
           <Text style={styles.textTimer}>{this.parseTime(timeInAMatch)}</Text>
         </View>
         <MyBanner
@@ -224,6 +252,13 @@ const styles = StyleSheet.create({
   textOnRight: {
     color: '#f2e2ce',
   },
+  text: {
+    textAlignVertical: 'center',
+    color: '#592202',
+    fontSize: parseInt(height, 10) / 50,
+    fontWeight: '300',
+    textAlign: 'center',
+  },
   textTimer: {
     textAlignVertical: 'center',
     flex: 1,

package.json

@@ -10,7 +10,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@ant-design/react-native": "^5.0.0",
+    "@react-native-community/geolocation": "^2.0.2",
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "^6.6.2",
     "axios": "^0.26.1",

page/App.js

@@ -8,6 +8,8 @@ import Stop from './StopTestPage';
 import HoverButton from '../component/HoverButton';
 import AloneRouter from '../component/AloneRouter';
 
+navigator.geolocation = require('@react-native-community/geolocation');
+
 //入口
 const App: () => Node = () => {
   const Stack = createNativeStackNavigator();