Question

使用useState分配函数时遇到问题。从我的理解来看，react-native-location文档： https://github.com/timfpark/react-native-location

我正在尝试使用文档中的这一点：

Subscribe
const unsubscribe = RNLocation.subscribeToLocationUpdates(locations => {
  ...
})

Unsubscribe
unsubscribe();

现在我的问题是我正在尝试使用useState挂钩分配取消订阅，因此当布尔值返回false时，可以在useEffect中调用它。因此，每次我尝试执行此操作时，似乎都会挂起subscribeToLocationUpdates调用，因此我永远都不会收到应该发出的位置对象。

我的代码：

我自己的用于跟踪用户位置的钩子：

useLocation.js

import {useState, useEffect} from 'react';
import RNLocation from 'react-native-location';

export default (shouldTrack, callback) => {
  const [error, setError] = useState('');
  const [unsubscribe, setUnsubscribe] = useState(null);

  RNLocation.configure({
    distanceFilter: 10, // Meters
    desiredAccuracy: {
      ios: 'bestForNavigation',
      android: 'balancedPowerAccuracy',
    },
    // Android only
    androidProvider: 'auto',
    interval: 5000, // Milliseconds
    fastestInterval: 10000, // Milliseconds
    maxWaitTime: 5000, // Milliseconds
    // iOS Only
    activityType: 'other',
    allowsBackgroundLocationUpdates: false,
    headingFilter: 1, // Degrees
    headingOrientation: 'portrait',
    pausesLocationUpdatesAutomatically: false,
    showsBackgroundLocationIndicator: false,
  });

  async function locationFetch() {
    await RNLocation.requestPermission({
      ios: 'whenInUse',
      android: {
        detail: 'fine',
        rationale: {
          title: 'Why do you need my location?',
          message: 'Im not creeping',
          buttonPositive: 'I understand',
          buttonNegative: 'Nope',
        },
      },
    })
      .then((granted) => {
        if (granted) {
          setError('');
          const unsub = RNLocation.subscribeToLocationUpdates(callback);
          setUnsubscribe(unsub);
        } else {
          throw new Error('Not Granted Locations Permissions');
        }
      })
      .catch((err) => {
        setError(err);
      });
  }

  useEffect(() => {
    if (shouldTrack) {
      locationFetch();
    } else {
      unsubscribe();
    }
  }, [shouldTrack]);

  return [error];
};

我使用钩子的文件：

import React, {useContext} from 'react';
//import {StyleSheet} from 'react-native';
import {Text} from 'react-native-elements';
import {SafeAreaView, withNavigationFocus} from 'react-navigation';
import Map from '../components/Map';
import {Context as LocationContext} from '../context/LocationContext';
import useLocation from '../hooks/useLocation';

const TrackCreateScreen = ({isFocused}) => {
  const {addLocation} = useContext(LocationContext);

  const [error] = useLocation(isFocused, addLocation);

  return (
    <SafeAreaView forceInset={{top: 'always'}}>
      <Text h2>Create a Track</Text>
      <Map />
      {error !== '' ? <Text>Please enable location services</Text> : null}
    </SafeAreaView>
  );
};

//const styles = StyleSheet.create({});

export default withNavigationFocus(TrackCreateScreen);

如果您取出我的setSubscribe，它确实会开始从调用中发出事件，但是以后我将无法调用unsubscribe方法。

任何帮助将不胜感激！

Answer 1

嘿，您知道这个问题吗？好像您将状态设置为对象的值一样而不是你所做的

const unsub = RNLocation.subscribeToLocationUpdates(callback);
          setUnsubscribe(unsub);

执行此操作

const unsub = RNLocation.subscribeToLocationUpdates(callback);
          setUnsubscribe({'unsub':unsub});

然后您可以在下面致电取消订阅。

unsubscriber.unsub()

不知道它为什么起作用，对我来说这根本没有意义。但这有效，如果您不相信我，可以尝试一下。

edit：实际上，这对我来说很有意义

问题设置从反应本地位置退订到状态变量

1 个答案: