1

我有一个具有以下结构的应用程序：

AuthNavi: {
  login1: login1,
  login2: login2
}

TabNavi: {
  tab1: TabNavi1
  tab2: TabNavi2,
  ...
}

AppSwitchNavi: {
  AuthLoading: LoadingScreen, (initial screen)
  Auth: AuthNavi,
  Content: TabNavi
}

该应用程序以 AppSwitchNavi 启动，如果尚未登录该应用程序，它将转到 AuthNavi，否则转到 TabNavi。

我想在登录后添加请求通知权限，也可以在登录后添加通知的处理。

有谁知道在这种情况下如何实现通知，只在 TabNavi 中有效？

4

1 回答 1

1

这是基于事件的简单组件实现。

import { EventEmitter } from 'events';

const appEvents = new EventEmitter();

appEvents.setMaxListeners(0);

export default class AppEvents {
    static removeEvent(subscribe) {
        subscribe.remove();
    }

    static registerLoginEvent(method) {
        return appEvents.addListener('Login-Required-Event', method);
    }

    static emitLoginEvent(data) {
        appEvents.emit('Login-Required-Event', data);
    }

    static removeLoginEvent(method) {
        appEvents.removeListener('Login-Required-Event', method);
    }
}

实施：

import React from 'react';
import AppEvents from './AppEvents';
import AppSwitchNavi from './Navigations';

export default class AppSwitchNaviWrapper extends React.Component {
    componentDidMount() {
        AppEvents.registerLoginEvent(this.loginEvent);
    }

    componentWillUnmount() {
        AppEvents.removeLoginEvent(this.loginEvent);
    }

    loginEvent = () => {
        // do something
    };

    render() {
        return <AppSwitchNavi />;
    }

}

从某种情况发出事件为AppEvents.emitLoginEvent(UserData);

但是 IMO 你应该在这种情况下处理 redux，从长远来看，Redux 会帮助你。基于事件的实现会给您带来问题，您必须非常小心地执行和删除事件以防止内存泄漏和应用程序的意外行为。

于 2018-05-10T05:55:53.757 回答