未定義不是對象（評估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} />);