Reagieren Native + Onesignal/Navigation oder Popup mit Push-Benachrichtigung

Question

Ich benutze React Native, reagieren-native-Onesignal und reagieren-Navigation. Wenn meine Aktionsschaltfläche in der Push-Benachrichtigung gedrückt wird, versuche ich zu einem Bildschirm zu navigieren oder zeige nur ein modales Pop-up, das ich einen anderen Bildschirm rendern kann.

Ich kann das nicht zum Funktionieren bringen. Ich bekomme immer Fehler wie: "Kann nicht lesen Eigenschaft Navigation von undefined" oder "this.setState ist keine Funktion"

Ich habe versucht, zu einem anderen Bildschirm zu navigieren, und ich habe versucht, einen sichtbaren Zustand auf wahr zu setzen eines modalen Popups und scheiterte bei beiden. Also denke ich, dass ich etwas falsch verstanden habe.

Hier einiger Code ist jeder weiter zu helfen, das Problem zu verstehen:

Anmerkung: Ich bin mir bewusst, dass ich nicht über eine ‚Navigation‘ prop Referenz, aber ich bin nicht sicher, wie es zuzugreifen. Ich dachte, dass war mir von dem Kindelement in meiner router.js Akte verfügbar.

zusätzliche Anmerkung: Ich denke, das Problem liegt daran, dass ich versuche, irgendwo zu navigieren oder ein Popup aus der 'onOpened (openResult)' Handler-Funktion rendern. Nicht sicher, wie Sie dies in den tatsächlichen Render-Teil der Komponente einfügen, wenn dies erforderlich ist.

Dies ist der APP CONTAINER (index.js):

import React, { Component } from 'react'; 
import { Text, Modal, View, Alert } from 'react-native'; 
import OneSignal from 'react-native-onesignal'; 
import { Root } from './config/router'; 

class App extends Component { 
constructor(props) { 
    super(props); 
    this.state = { modalVisible: false }; 
    this.setModalVisible = this.setModalVisible.bind(this); 
} 

componentWillMount() { 
    OneSignal.addEventListener('received', this.onReceived); 
    OneSignal.addEventListener('opened', this.onOpened); 
    OneSignal.addEventListener('registered', this.onRegistered); 
    OneSignal.addEventListener('ids', this.onIds); 
} 

componentDidMount() { 
    FingerprintScanner 
    .isSensorAvailable() 
    .catch(error => this.setState({ errorMessage: error.message })); 
} 

componentWillUnmount() { 
    OneSignal.removeEventListener('received', this.onReceived); 
    OneSignal.removeEventListener('opened', this.onOpened); 
    OneSignal.removeEventListener('registered', this.onRegistered); 
    OneSignal.removeEventListener('ids', this.onIds); 
} 

onReceived(notification) { 
    console.log('Notification received: ', notification); 
} 

onOpened(openResult) {   
    console.log('Message: ', openResult.notification.payload.body); 
    console.log('Data: ', openResult.notification.payload.additionalData); 
    console.log('isActive: ', openResult.notification.isAppInFocus); 
    console.log('openResult: ', openResult); 
    if (openResult.action.actionID === 'fingerprint_id') {   
     console.log('fingerprint_id: ', 'clicked'); 
     //this.props.navigation.navigate('tbdScreen'); 
     //or 
     //this.setModalVisible(true) 
    } 
} 

onRegistered(notifData) { 
    console.log('Device had been registered for push notifications!', notifData); 
} 

onIds(device) { 
console.log('userId: ', device.userId); 
} 

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

render() {   
    return (
      <Root> 
       <View> 
        <Modal 
         animationType={"slide"} 
         transparent={false} 
         visible={this.state.modalVisible}      
        > 
         <View> 
          <Text>this is the modal!</Text> 
         </View> 
        </Modal> 
       </View> 
      </Root> 
      ); 

} 
} 

export default App; 

THIS IS MY ROUTER FILE (router.js):

import React from 'react'; 
import { TabNavigator, StackNavigator } from 'react-navigation'; 

import WelcomeScreen from '../screens/WelcomeScreen'; 
import AuthScreen from '../screens/AuthScreen'; 
import HomeScreen from '../screens/HomeScreen'; 
import SettingsScreen from '../screens/SettingsScreen'; 
import TBDScreen from '../screens/TBDScreen'; 

export const HomeStack = StackNavigator({ 
    home: { 
     screen: HomeScreen 
    }, 
    settings: { 
    screen: SettingsScreen, 
    navigationOptions: { 
     title: 'Settings' 
    } 
} 
} 
); 

export const Tabs = TabNavigator({ 
    welcome: { 
     screen: WelcomeScreen, 
     navigationOptions: {    
      TabBarLabel: 'Welcome' 
     } 
    }, 
    auth: { 
     screen: AuthScreen, 
     navigationOptions: {    
      TabBarLabel: 'Auth' 
     } 
    }, 
    home: { 
     screen: HomeStack, 
     navigationOptions: {    
      TabBarLabel: 'HomeScreen' 
     } 
    } 
}, 
{ 
    tabBarPosition: 'bottom' 
}); 

export const Root = StackNavigator({ 
    Tabs: { 
     screen: Tabs, 
    },  
    tbdScreen: { 
     screen: TBDScreen, 
    } 
}, 
{ 
    mode: 'modal', 
    headerMode: 'none', 
}); 

Ich habe mich auch bereits in Verwenden von Redux mit meiner React Navigation, um den Navigationsstatus beizubehalten. Vielleicht ist das, was ich tun muss, um auf die Navigationsaktionen der Datei router.js aus der App-Komponente in der Datei index.js zuzugreifen?

Wie auch immer, vielen Dank im Voraus, da ich seit einer Weile auf diesem stecken geblieben bin und ich versuche, von diesem Problem zu lernen.

Answer 1

Ihre onOpened-Funktion hat nicht den richtigen Bereich, da sie in der addEventListener-Funktion von OneSignal aufgerufen wird, so dass Sie "this" wie folgt binden müssen.

ändern OneSignal.addEventListener('opened', this.onOpened);

zu

OneSignal.addEventListener('opened', this.onOpened.bind(this));

Und Sie werden this.props.navigation.navigate innerhalb der onOpened Funktion zur Verfügung stehen.