React Native Render Modal onMessage Firebase 通知

Question

我在我的应用程序的服务类（不是 React 组件）中注册了一个 onMessage() Firebase 通知侦听器。

在方法内部，我调用了一个呈现模态的 React 组件。问题是组件永远不会被调用（我尝试在组件的constructor() 和render() 方法中添加调试语句，但它们没有被打印出来。

这是我的监听代码：

this.notificationListener = messaging().onMessage(async notification => {
    console.log("listener is invoked"); //this is printed.
    <MyModalComponent />
}

根据 Riwen 的评论更新了 Class 代码：

class NotificationService extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
           dummy: false,
        }
    }

    render() {
        return(<></>);
    }

    async registerNotifications() {
        await this.checkPermissions();

        this.registerNotificationsListeners();
    }

    registerNotificationsListeners() {
        this.notificationListener = messaging().onMessage(async notification => {
            console.log('there is a notification ', notification); //this gets printed
            this.setState({dummy: true});
            {this.state.dummy && <MyModalComponent />}
        }
    }
}

<NotificationService />

组件仍未被调用。

Answer 1

试试这个：

class NotificationService extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
           dummy: false,
        }
    }

    render() {
        return(<>{this.state.dummy && <MyModalComponent />}</>);
    }

    registerNotificationsListeners() {
        this.notificationListener = messaging().onMessage(async notification => {
            console.log('there is a notification ', notification); //this gets printed
            this.setState({dummy: true});
        }
    }
}

还要确保您确实注册了通知侦听器，例如在componentDidMount。