react-native - React Native + Onesignal/导航或带有推送通知的弹出窗口

Question

我正在使用React Native、react-native-onesignal 和react-navigation。当按下推送通知中的操作按钮时，我试图导航到一个屏幕或仅显示一个模式弹出窗口，我可以在其中渲染另一个屏幕。

我无法让它工作。我不断收到如下错误:“无法读取未定义的属性‘导航’”或“this.setState 不是函数”

我尝试导航到另一个屏幕，并尝试将模式弹出窗口的可见状态设置为 true，但都未能成功。所以，我认为我的方法可能误解了一些东西。

下面是一些代码，可以帮助大家进一步理解问题:

注意:我知道我没有“导航” Prop 引用，但我不确定如何访问它。我认为我可以从 router.js 文件中的子元素中使用它。

附加说明:我认为问题是因为我试图导航到某个地方或从“onOpened(openResult)”处理函数渲染弹出窗口。如果需要的话，不确定如何将其包含在组件的实际渲染部分中。

这是应用程序容器 (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;

这是我的路由器文件 (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',
});

我还一直在研究将 Redux 与我的 React Navigation 一起使用来保留导航状态。也许这就是我需要执行的操作，以便从index.js 文件中的App 组件访问router.js 文件的导航操作？

无论如何，提前非常感谢，因为我已经在这个问题上停留了一段时间，并且我希望从这个问题中学习。

Answer 1

您的 onOpened 函数没有正确的作用域，因为它是在 OneSignal 的 addEventListener 函数中调用的，因此您必须按如下方式绑定(bind)“this”。

改变OneSignal.addEventListener('opened', this.onOpened);

至

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

您将在 onOpened 函数中使用 this.props.navigation.navigate。