Question

我制作了一个React本机应用程序，在其中实现了Firebase通知。我已将所有与通知相关的服务代码放入app.js文件中。这是我的app.js文件


export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
}



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

  async createNotificationListeners() {
    /*
    * Triggered when a particular notification has been received in foreground
    * */
    this.notificationListener = firebase.notifications().onNotification((notification) => {
        const { title, body } = notification;
       // this.showAlert(title, body);
        ToastAndroid.show("Notfictatoin recieved......"+title+"..."+body,ToastAndroid.LONG)
    });

    /*
    * If your app is in background, you can listen for when a notification is clicked / tapped / opened as follows:
    * */
    this.notificationOpenedListener = firebase.notifications().onNotificationOpened((notificationOpen) => {



     const navigateAction = NavigationActions.navigate({
      routeName: 'OrderHistory',
      params: {},
  })

 this.props.navigation.dispatch(navigateAction)




    });

    /*
    * If your app is closed, you can check if it was opened by a notification being clicked / tapped / opened as follows:
    * */
    const notificationOpen = await firebase.notifications().getInitialNotification();
    if (notificationOpen) {
       // const { title, body } = notificationOpen.notification;
        //this.showAlert(title, body);
        ToastAndroid.show("notification inintalss....",ToastAndroid.LONG)
    }
    /*
    * Triggered for data only payload in foreground
    * */
    this.messageListener = firebase.messaging().onMessage((message) => {
      //process data message
      // console.log(JSON.stringify(message));
      ToastAndroid.show(JSON.stringify(message),ToastAndroid.LONG)
      this.displayNotification(message)
    });
  }
  displayNotification = (notification) => {
      if (Platform.OS === 'android') {
          const localNotification = new firebase.notifications.Notification({
              sound: 'default',
              show_in_foreground: true,
          }).setNotificationId(notification._from)
          .setTitle(notification._data.title)
          .setSubtitle(notification.subtitle)
          .setBody(notification._data.content)
          .setData(notification.data)
              .android.setChannelId('notification_channel_name') // e.g. the id you chose above
              .android.setSmallIcon('logo') // create this icon in Android Studio
              .android.setColor('#D3D3D3') // you can set a color here
              .android.setPriority(firebase.notifications.Android.Priority.High);

          firebase.notifications()
              .displayNotification(localNotification)
              .catch(err => console.error(err));

      }
      else if (Platform.OS === 'ios') {
        console.log(notification);
        const localNotification = new firebase.notifications.Notification()
            .setNotificationId(notification._from)
            .setTitle(notification._data.title)
            .setSubtitle(notification.subtitle)
            .setBody(notification._data.content)
            .setData(notification.data)
            .ios.setBadge(notification.ios.badge);

        firebase.notifications()
            .displayNotification(localNotification)
            .catch(err => console.error(err));

    }
  }

  componentDidMount(){
    this.createNotificationListeners(); //add this line
  }




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

AppNavigator文件是单独的文件，它将整个导航器（如stacknavigator和抽屉导航器）放入整个应用程序。现在在通知上单击，当我想转到特定屏幕时，这给了我错误 this.props.navigatio.dispatch未定义。我怎么解决这个问题？预先感谢。

Answer 1

您可以在组件外部导航导航器分派操作，查看react-navigation文档以了解操作方法：https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html

文档对此非常直接

Answer 2

导出App.js withNavigation()，以便您的导航器可以将导航道具传递给您的App组件。在App.js中导入withNavigation，然后在类的开头删除导出默认值，然后在最后一个花括号'}'之后在页面末尾导出默认值withNavigation；

import { withNavigation } from 'react-navigation';

class App extends React.Component { ... }

export default withNavigation(App);

Answer 3

首先您需要创建具有以下内容的 RootNavigation.js 文件

import { NavigationActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

// add other navigation functions that you need and export them

export default {
  navigate,
  setTopLevelNavigator,
};

然后在您的 App.js 中，您需要将该文件包含为 NavigationService 并将作为 ref 参数添加到您的导航中。之后，您就可以使用 NavigationService.navigate('ChatScreen', { userName: 'Lucy' });

对屏幕进行导航调用

下面的 App.js 示例

    ...
    import NavigationService from './src/AppNavigation/RootNavigation';
    
    ...
    
    class App extends React.Component {
    
    ...
    
      async componentDidMount() {
    
    
        // For example you are using on message notifications
        this.onMessageListener = messaging().onMessage(async remoteMessage => {
        ...
       
        NavigationService.navigate('ChatScreen', { remoteMessage: remoteMessage })
    
        ...
        });
    
    ...
    
    }
    
    ...
    
      render() {
    
        return (
              <AppNavigation
                ref={navigatorRef => {
                  NavigationService.setTopLevelNavigator(navigatorRef);
                }}>
              {/* ... */}
              </AppNavigation>
        )
      }
    
    }
    export default App

如何在React Native中使用App.js文件内的导航道具

3 个答案: