如何将RNLocation方法适配React Native函数式组件

核心改造思路 #

• 用useEffect处理副作用：权限请求、位置更新这类操作属于组件副作用，必须放在useEffect中执行，避免组件每次重渲染重复触发。
• 用useRef保存订阅实例：位置订阅需要在组件生命周期内保持引用，useRef能防止组件重渲染时丢失订阅，同时在组件卸载时取消订阅，避免内存泄漏。
• 替换类组件语法：移除this相关调用，用useState的更新函数替代类组件的setState，将类组件方法转为普通函数。

修改后的完整代码 #

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

function LatLonBox(){
  const [currentLocation, setLocation] = useState(null);
  // 保存位置订阅引用，防止组件重渲染丢失
  const locationSubscriptionRef = useRef(null);

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

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

  // 请求权限并启动位置更新
  useEffect(() => {
    const requestLocationPermission = async () => {
      const granted = await RNLocation.requestPermission({
        ios: "whenInUse"
      });
      
      if (granted) {
        _startUpdatingLocation();
      }
    };

    requestLocationPermission();

    // 组件卸载时取消位置订阅
    return () => {
      if (locationSubscriptionRef.current) {
        locationSubscriptionRef.current();
      }
    };
  }, []); // 空依赖数组确保只执行一次

  // 启动位置更新
  const _startUpdatingLocation = () => {
    locationSubscriptionRef.current = RNLocation.subscribeToLocationUpdates(
      locations => {
        setLocation(locations[0]);
      }
    );
  };

  return(
    <SafeAreaView>
      <LocationContainer>
        <Text style={styles.Custom_Text}>
          {currentLocation?.longitude ?? '获取中...'}
        </Text>
        <Text style={styles.Custom_Text}>
          {currentLocation?.latitude ?? '获取中...'}
        </Text>
      </LocationContainer>
    </SafeAreaView>
  ); 
}

export default LatLonBox;

关键修改点说明 #

• 权限请求优化：将原Promise链式调用改为async/await写法，放在useEffect内部，确保组件挂载时仅执行一次。
• 订阅生命周期管理：用useRef存储订阅函数，组件卸载时调用该函数取消订阅，避免内存泄漏。
• 空值安全处理：渲染位置信息时使用可选链?.和默认值，防止currentLocation为null时触发报错。
• 样式修复：修正原代码中样式名不一致的问题（Custom_Text vs CustomText）。

内容的提问来源于stack exchange，提问作者bombombs