如何从库中转换方法以适应功能组件

Question

需要帮助将RNLocation.requestPermission和_startUpdatingLocation转换为使用react本机中的功能组件。

不知道如何解决这个问题

LatLon组件文件

import React, {useState} from "react";
import { SafeAreaView, StyleSheet, Text, } from "react-native";
import RNLocation from "react-native-location";
import moment from "moment";
import styled from 'styled-components/native';

function LatLonBox(){

  const [currentLocation, setLocation] = useState(null);

  const styles = StyleSheet.create({
    Custom_Text:{
      textAlign:'center',
      fontSize:15
  }
  });

  const LocationContainer = styled.View`
    marginTop: 10;
    marginBottom: 10;
  `;


  //How to make this work in functional style component
  RNLocation.requestPermission({
    ios: "whenInUse"
    }).then(granted => {
        if (granted) {
            this._startUpdatingLocation();
        }
    });
  }

  //How to make this work in functional style component
  _startUpdatingLocation = () => {
    this.locationSubscription = RNLocation.subscribeToLocationUpdates(
        locations => {
            this.setState({ location: locations[0] });
        }
    );
  };


  return(
    <SafeAreaView>
        <React.Fragment>
          <LocationContainer>
            <Text style = {styles.CustomText}>{currentLocation.longitude}</Text>
            <Text style = {styles.CustomText}>{currentLocation.latitude}</Text>
          </LocationContainer>
        </React.Fragment>
    </SafeAreaView>
  ); 
}

export default LatLonBox;

屏幕文件//如果需要只是额外的

import React from 'react';
import {  SafeAreaView } from 'react-native';
import { StackParamList } from '../types';
import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
import { NativeStackScreenProps } from '@react-navigation/native-stack';
import LatLonBox from '../components/LatLonBox';

export default ({}: NativeStackScreenProps<StackParamList, 'Main'>): JSX.Element => {
  
  return (
    <BottomSheetModalProvider>
        <SafeAreaView style={{ flex: 1}}>
        <LatLonBox/>     //where LatLon will be placed   
      </SafeAreaView>
    </BottomSheetModalProvider>
  );
};

Answer 1

你可以查一下这个

嘿，希望这能帮上忙，尽管有疑问：

​

  const _startUpdatingLocation = () => {
   const locationSubscription = RNLocation.subscribeToLocationUpdates(
        locations => {
           setLocation(locations[0])
        }
    );
  };

const requestPermission = useCallback(() => {

RNLocation.requestPermission({
    ios: "whenInUse"
    }).then(granted => {
        if (granted) {
            _startUpdatingLocation();
        }
    });
  }
  
},[_startUpdatingLocation])

useEffect(() => {
requestPermission()
},[requestPermission])

//How to make this work in functional style component

​