Question

我正在尝试在我的React Native应用程序中设置一个消息传递模块，它应该从服务获取信息并以不同的方式在不同的组件中呈现它。有点像收件箱消息：您收到一条消息，在标题组件中，您会看到带有红点的收件箱和新消息的数量。如果单击它，则转到另一个完全呈现消息的组件。

现在，我创建了两个组件来以这两种不同的方式呈现收件箱。但是当我尝试将它们链接到处理通知的类时，我在组件类中得到错误，说明该对象未定义。

我有这样的事情：

存储新讯息的类

class Notifications {
    constructor() {
        this.notifications = [];
    }

    receiveNotification(notif) {
        this.notifications.push(notif);
    }
}

let notifications = new Notifications();

export { notifications };

处理来自服务的新邮件的类

import framework from 'framework'; // this is the framework I use to communicate with the service
import Notifications from './Notifications.js';

export class PushNotificator extends Component {
  constructor(props) {
    super(props);
    this.state = {
      token: ""
    }
  }

  componentDidMount() {
    framework.requestPermissions()
    .then(() => console.log('granted'))
    .catch(() => console.log('notification permission rejected'));


    framework.getToken().then(token => {
      console.log("TOKEN (getToken)", token);
      this.setState({token: token});
    });

    this.notificationListener = framework.on(frameworkEvent.Notification, notif => {
      console.log("Notification", notif);
      this.showLocalNotification(notif);
    })
  }

  showLocalNotification(notif) {
    Notifications.notifications.push(notif); // this fails because Notifications is undefined
    framework.presentLocalNotification({
      title: notif.title,
      body: notif.body,
      priority: "high",
      click_action: notif.click_action,
      show_in_foreground: true,
      local: true
    });
  }

  componentWillUnmount() {
    this.notificationListener.remove();
  }


  render() {
    return null;
  }
}

标题收件箱组件的相关部分

import Notifications from './Notifications.js' //assume the paths are correct 
import {PushNotificator} from './PushNotificator.js'

export class Home extends Component {
    constructor(props) {
        super(props);

        this.state = {
            loading: true,
            notifications: Notifications.notifications.find(notif => notif.seen).length
        };

        this.closeActivityIndicator = () => setTimeout(() => {
            this.setState({ loading: false });
        }, 2000);
    }

...
render() {
    <PushNotificator />
    ...
}

一旦调用构造函数，程序就会失败，因为Notifications未定义。但为什么它没有定义？我不能这样用吗？

感谢。

Answer 1

我知道，有两种方法可以解决您的问题：

1。您已经实例化了Notifications，因此默认情况下可以导出该实例而无需额外包装：

export default notifications;

然后只是：

import notifications from './Notifications.js';
// ...
notifications.push(notif);

2。如果您不想使用default，可以继续通过

导出实例

export { notifications };

在这种情况下，您需要正确导入它：

import { notifications } from './Notifications.js';
// ...
notifications.push(notif);

但在这两种情况下，您都使用的是instatiated notifications对象，而不是Notifications类。

如何围绕React Native组件传递全局对象？

1 个答案: