Question

我正在我的React Native应用程序中实现Firebase云消息传递。我有一个带有静态方法和变量的常规类（不是React组件），该类会在应用程序触发时实例化。此类具有三种静态方法/侦听器（前景，后台和启动应用程序），用于管理来自Firebase的推送通知。

我正在尝试前台处理动作。当用户收到来自Firebase的推送消息时，无论他在哪个屏幕上，该如何在屏幕顶部（而不是切换屏幕，而是使用两个按钮在中间运行覆盖卡）的屏幕上渲染模态？

本文在hackernoon提供了经过尝试的解决方案，将模式组件包装在AppContainer中并没有做任何事情。 https://hackernoon.com/managing-react-modals-with-singleton-component-design-5efdd317295b

我也在本教程中使用模态组件尝试了这个想法，但在任何情况下都没有成功。 https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html

Firebase云消息传递类：

 export default class FCM {
static appClosedListener = async () => {
    const firebaseContent = await firebase.notifications().getInitialNotification();

    if (firebaseContent) {
      console.log(firebaseContent);
      const serverParcel = JSON.parse(firebaseContent._data.payload).an;
      const notificationState = "closedapp";
      FCM.pushNotificationHandler(serverParcel, notificationState);
    }
  };

  static backgroundListener = () => {
    FCM.background = firebase.notifications().onNotificationOpened(firebaseContent => {
      const serverParcel = JSON.parse(firebaseContent._data.payload).an;
      const notificationState = "background";
      FCM.pushNotificationHandler(serverParcel, notificationState);
    });
  };

  static foregroundListener = () => {
    FCM.foreground = firebase.notifications().onNotification(firebaseContent => {
      const serverParcel = JSON.parse(firebaseContent._data.payload).an;
      const notificationState = "foreground";
      FCM.pushNotificationHandler(serverParcel, notificationState);
    });
  };

  static pushNotificationHandler = (serverParcel, notificationState) => {
    const typeOfAction = serverParcel.typeEnum;
    switch(typeOfAction){
      case "message":
        break;

      case "webnews":
        const url = serverParcel.link;
        NavigationService.navigate("FCMModal", {}); //Here is where I want the modal to popup.
        //NavigationService.navigate("InAppBrowser", {url});
        break;
    }
  }

App.js

const ModalStack = createStackNavigator(
  {
    FCMModal: FCMModal
  },
  {
    mode: 'modal',
    transparentCard: true,
    cardStyle: {
      // makes transparentCard work for android
      opacity: 1.0
    }
  }
)

    let rootStack = createStackNavigator(
      {
        main: {
          screen: BottomTabNavigator //There are four navigatorstacks with multiple screens beneath here
        },
        InAppBrowser: {
          screen: InAppBrowserStack,
          defaultNavigationOptions: {
            tabBarVisible: true
          }
        },
        FCMModal: {
          screen: ModalStack
        }
      },
      {
        initialRouteName: "main",
        headerMode: "none"
      }
    );

    const AppContainer = createAppContainer(rootStack);
    export default class App extends Component {
      render() {
        return (
          <AppContainer 
            ref={navigatorRef => {
              NavigationService.setTopLevelNavigator(navigatorRef);
            }}
          />     
        );
      }
    }

模范班

import React, { Component } from 'react';
import { Modal, Text, TouchableHighlight, View } from 'react-native';

export default class FCMModal extends Component {
  state = {
    modalVisible: true,
  };

  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  render() {
    return (
      <View style={{width: 600, height: 400, borderWidth: 2, borderColor: 'red', opacity: 0.5}}>
        <Modal
          animationType="slide"
          transparent={true}
          visible={this.state.modalVisible}
          onRequestClose={() => {console.log("CLOSING MODAL!")}}>
          <View style={{marginTop: 22}}>
            <View>
              <Text>Hello World!</Text>

              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(false);
                }}>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>
      </View>
    );
  }
}

如何在屏幕顶部渲染模态

0 个答案: