React Native集成OneSignal始终无法获取用户ID（PlayerID）问题求助

我看了你的代码，问题出在你在组件render阶段直接调用OneSignal.getDeviceState()来获取userId——但OneSignal的订阅流程是异步的：用户授权推送权限、OneSignal完成服务器注册这些操作都需要时间，组件刚渲染的时候大概率还没走完这些流程，所以deviceState.userId自然是undefined。

下面是具体的解决步骤和修改后的代码：

核心思路 #

用组件状态来存储userId，通过OneSignal的SubscriptionObserver监听订阅状态变化，在拿到有效userId时更新状态，再执行后续的数据库存储和WebView渲染操作。

修改后的代码 #

import React, { Component } from 'react';
import { BackHandler, View, Text } from 'react-native';
import { WebView } from 'react-native-webview';
import OneSignal from 'react-native-onesignal';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.WEBVIEW_REF = React.createRef();
    // 初始化状态存储userId
    this.state = { userId: null };
  }

  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
    
    // 配置OneSignal日志级别，方便调试
    OneSignal.setLogLevel(6, 0);
    // 设置你的OneSignal App ID
    OneSignal.setAppId("fdb89158-4072-4964-b490-6ba70fb6b5fd");

    // 请求用户推送权限
    OneSignal.promptForPushNotificationsWithUserResponse(response => {
      console.log("用户权限响应:", response);
      // 如果用户拒绝权限，可以在这里提示开启
      if (response === false) {
        alert("需要开启推送权限才能获取用户ID");
      }
    });

    // 前台通知处理（按需保留）
    OneSignal.setNotificationWillShowInForegroundHandler(notificationReceivedEvent => {
      let notification = notificationReceivedEvent.getNotification();
      console.log("前台通知:", notification);
      notificationReceivedEvent.complete(notification);
    });

    // 通知点击处理（按需保留）
    OneSignal.setNotificationOpenedHandler(notification => {
      console.log("通知被点击:", notification);
    });

    // 权限变化监听（按需保留）
    OneSignal.addPermissionObserver(event => {
      console.log("权限变化:", event);
    });

    // 关键：监听订阅状态变化，获取userId
    OneSignal.addSubscriptionObserver(event => {
      console.log("订阅状态变化，userId:", event.to.userId);
      // 当拿到有效userId时更新状态并存入数据库
      if (event.to.userId) {
        this.setState({ userId: event.to.userId }, () => {
          // 这里调用你的GET请求存入数据库
          fetch(`你的后端接口地址?userId=${this.state.userId}`, { method: 'GET' })
            .then(res => res.json())
            .then(data => console.log("userId已成功存入数据库", data))
            .catch(err => console.error("存储失败:", err));
        });
      }
    });

    // 初始化后尝试获取一次现有userId（比如用户之前已经授权过）
    const initialDeviceState = OneSignal.getDeviceState();
    if (initialDeviceState?.userId) {
      this.setState({ userId: initialDeviceState.userId });
    }
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
  }

  handleBackButton = () => {
    if (this.WEBVIEW_REF.current) {
      this.WEBVIEW_REF.current.goBack();
      return true;
    }
    return false;
  }

  onNavigationStateChange(navState) {
    this.setState({ canGoBack: navState.canGoBack });
  }

  render() {
    const { userId } = this.state;

    // 如果userId还未获取到，显示加载提示
    if (!userId) {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>正在获取推送权限和用户ID...</Text>
        </View>
      );
    }

    // 拿到userId后渲染WebView
    return (
      <WebView
        source={{ uri: `https://www.google.com/search?q=${userId}` }}
        style={{ marginTop: 35 }}
        ref={this.WEBVIEW_REF}
        onNavigationStateChange={this.onNavigationStateChange.bind(this)}
      />
    );
  }
}

额外注意事项 #

• 权限检查：如果用户拒绝了推送权限，event.to.userId会是null，所以要在权限请求回调里提示用户开启权限，否则无法获取userId。
• 依赖配置：确保你已经正确安装了react-native-onesignal，并且完成了Android/iOS的原生配置（比如Android的Manifest文件配置、iOS的Info.plist推送权限声明）。
• 调试技巧：通过OneSignal.setLogLevel(6, 0)开启详细日志，查看控制台输出，确认OneSignal的初始化和订阅流程是否正常。

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