PubNubReact已弃用，React Native实时定位如何使用新版PubNub？

1. 替换废弃依赖，安装最新 PubNub SDK #

原 pubnub-react 包已停止维护，现在直接使用官方核心 SDK：

npm install pubnub
# 或
yarn add pubnub

2. 重构代码适配最新 API #

以下是适配后完整的实时定位追踪代码，结合 react-native-maps 实现功能：

import React from 'react';
import { StyleSheet, View, Dimensions, SafeAreaView } from 'react-native';
import MapView, { Marker, AnimatedRegion } from 'react-native-maps';
import PubNub from 'pubnub'; // 替换原 PubNubReact 导入

const { width, height } = Dimensions.get("window");

const ASPECT_RATIO = width / height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const LOCATION_CHANNEL = 'real-time-location-tracking'; // 定义专用定位频道

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      latitude: LATITUDE,
      longitude: LONGITUDE,
      coordinate: new AnimatedRegion({
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: 0,
        longitudeDelta: 0
      })
    };

    // 初始化 PubNub 实例，无需绑定 React 组件
    this.pubnub = new PubNub({
      publishKey: "你的发布密钥",
      subscribeKey: "你的订阅密钥",
      uuid: 'user-unique-identifier' // 设置用户唯一标识，区分不同客户端
    });
  }

  componentDidMount() {
    // 监听频道内的位置消息
    this.pubnub.addListener({
      message: (msgEvent) => {
        const { latitude, longitude } = msgEvent.message;
        // 更新地图标记位置（带动画过渡）
        this.setState({ latitude, longitude });
        this.state.coordinate.timing({
          latitude,
          longitude,
          latitudeDelta: LATITUDE_DELTA,
          longitudeDelta: LONGITUDE_DELTA
        }).start();
      }
    });

    // 订阅定位频道
    this.pubnub.subscribe({
      channels: [LOCATION_CHANNEL],
      withPresence: false // 根据需求决定是否开启在线状态监听
    });

    // 示例：模拟位置更新，实际项目替换为真实定位逻辑
    this.startLocationTracking();
  }

  componentWillUnmount() {
    // 清理资源，避免内存泄漏
    this.pubnub.unsubscribe({ channels: [LOCATION_CHANNEL] });
    this.pubnub.removeAllListeners();
    clearInterval(this.updateInterval);
  }

  // 发布当前位置到频道
  publishCurrentLocation = (latitude, longitude) => {
    this.pubnub.publish({
      channel: LOCATION_CHANNEL,
      message: { latitude, longitude },
      storeInHistory: false // 是否存储消息到历史记录
    }, (status, response) => {
      if (status.error) {
        console.error('位置发布失败:', status);
      }
    });
  };

  // 模拟位置更新，实际项目中替换为 react-native-geolocation-service 获取真实定位
  startLocationTracking = () => {
    let currentLat = LATITUDE;
    this.updateInterval = setInterval(() => {
      currentLat += 0.0001;
      this.setState({ latitude: currentLat });
      this.publishCurrentLocation(currentLat, LONGITUDE);
    }, 2000);
  };

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <MapView
          style={styles.map}
          initialRegion={{
            latitude: this.state.latitude,
            longitude: this.state.longitude,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA
          }}
        >
          <Marker.Animated
            coordinate={this.state.coordinate}
            title="当前追踪位置"
          />
        </MapView>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

3. 关键改动说明 #

• 依赖替换：用官方核心库 pubnub 替代已废弃的 pubnub-react
• 初始化逻辑：无需调用 init(this)，直接创建 PubNub 实例即可
• 消息监听：使用 addListener 统一处理频道消息，替换旧版回调方式
• 资源清理：组件卸载时必须取消订阅、移除监听、清除定时器，避免内存泄漏
• 真实定位适配：示例中的模拟定位需替换为 react-native-geolocation-service 或 RN 官方 Geolocation 模块的真实定位逻辑

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