未定义不是对象（评估this.props.navigation.navigate）

Question

我有一个router.js像这样：

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

import Login from '../components/login/Login';
import Activation from '../components/login/Activation';
import Phone from '../components/login/Phone';
import ContainerNavs from '../components/navs/ContainerNavs';
import Notification from '../components/navs/notification/Notification';
import Question from '../components/navs/notification/Question';


export const LoginStack = StackNavigator({
  Login: {
    screen: Login,
  },
  Phone: {
    screen: Phone,
  },
  Activation: {
    screen: Activation,
  }
},
{
  headerMode: 'none'
});


export const HomeStack = StackNavigator({
  Home: {
    screen: ContainerNavs,
  },
  Notifications: {
    screen: Notification,
  },
  Question: {
    screen: Question,
  },
},
{
  headerMode: 'none'
});





export const Root = StackNavigator({
  Login: {
    screen: LoginStack,
  },
  Home:{
    screen: HomeStack,
  },
},{
  mode: 'modal',
  headerMode: 'none',
  initialRouteName: 'Login',
}

);

ContainerNavs是来自native-base库的FooterTab 。

我在ContainerNavs呈现的Notification组件：

 renderSelectedTab () {
     switch (this.state.selectedTab) {
       case 'home':
       return (<Home />);
         break;
       case 'search':
         return (<Text>search</Text>);
         break;
        case 'new':
           return (<New />);
           break;
        case 'notification':
            return (<Notification  />);
            break;
        case 'profile':
         return (<Profile />);
         break;


     }
   }

在Notification组件内部，我编写了以下代码：

 goTo(page){
   this.props.navigation.navigate(page);
 }

  render() {
    return (
      <List>
        <ListItem>
        <Card style={{backgroundColor:'#f2f2f6'}}>
        <Button
          onPress={()=>this.goTo('Question')}
        >
          <Text>Toast</Text>
        </Button>

但是，当我单击“ Toast按钮时，出现此错误：

undefined is not an object (evaluation this.props.navigation.navigate)

我认为我应该将导航从ContainerNavs传递到Notification 。

Answer 1

解决了这个窍门：

return (<Notification navigation={this.props.navigation} />);