React Nativeコンポーネントの周りにグローバルオブジェクトを渡すには？

Question

React Nativeアプリでメッセージングモジュールを設定しようとしています。これは、サービスから情報を取得し、さまざまな方法でさまざまなコンポーネントでレンダリングする必要があります。ここに受信トレイのメッセージのようなものがあります。メッセージを受け取り、ヘッダーコンポーネントに赤い点と新しいメッセージの数が入った受信トレイが表示されます。これをクリックすると、メッセージを完全にレンダリングする別のコンポーネントに移動します。

ここでは、2つの異なる方法で受信トレイを表示するための2つのコンポーネントを作成しました。しかし、通知を処理するクラスにそれらをリンクしようとすると、オブジェクトが定義されていないことをコンポーネントクラス内でエラーが発生します。

私はこのようなものがあります：サービスからの新しいメッセージ

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; 
    } 
} 

ヘッダの関連部分を処理する新しいメッセージを格納する

クラス

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

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

let notifications = new Notifications(); 

export { notifications }; 

クラス受信ボックスコンポーネント

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

は、私が見、2つのオプションがありますが、あなたの問題修正方法：

：追加のラッピングせずに、デフォルトでそのインスタンスをエクスポートすることが可能であるので、あなたはすでにあなたの Notificationsをインスタンス化している

1.を、

export default notifications; 

してからちょうど：

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

2.あなたがdefaultを使用したくない場合は、

export { notifications }; 

、あなたはそれを正しくインポートする必要があり、その場合の経由でインスタンスをエクスポート続けることがあります。

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

しかし、どちらの場合にあなたがいます指示されたnotificationsオブジェクトで動作し、Notificationsクラスでは動作しません。