我有这样的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
是FooterTab
库中的native-base
。
在Notification
内部呈现的我的ContainerNavs
组件:
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
。
答案 0 :(得分:0)
解决了这个难题:
return (<Notification navigation={this.props.navigation} />);