Question

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

我无法让这个工作。我一直收到如下错误： “无法读取未定义的属性'导航'或”this.setState不是函数“

我试图导航到另一个屏幕，我试图将模态弹出窗口的可见状态设置为true，但两者都未成功。所以，我认为我可能会误解我的方法。

以下是一些帮助大家进一步了解问题的代码：

注意：我知道我没有“导航”道具参考，但我不知道如何访问它。我以为我的router.js文件中的子元素可以使用。

附加说明：我认为问题是因为我试图在某处导航或从'onOpened（openResult）'处理函数渲染弹出窗口。如果需要，不确定如何将其包含在组件的实际渲染部分中。

这是APP容器（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函数中调用的，所以你必须绑定＆＃34;这个＆＃34;如下。

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

到

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

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

Answer 2

只需执行以下操作：

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

使用推送通知反应Native + Onesignal /导航或弹出窗口

2 个答案: