React native -未定义不是对象('evaluating this.props.navigation')
React native -未定义不是对象('evaluating this.props.navigation')
提问于 2018-06-03 05:34:55
预期行为:应打开标题中包含菜单图标的抽屉。
当前行为:错误消息undefined is not an object ('evaluating this.props.navigation')
搜索错误对我没有帮助。
我将导航拆分为两个文件: RootNavigation.js和MainTabNavigation
RootNavigation.js
const AppNavigator = createSwitchNavigator({
Main: MainTabNavigator,
});
const DrawerStack = createDrawerNavigator({
Home: {
screen: AppNavigator
},
Login: {
screen: login
},
Signup: {
screen: signup
}
});
export default class RootNavigation extends React.Component {
componentDidMount() {
this._notificationSubscription = this._registerForPushNotifications();
}MainTabNavigation.js
const HomeStack = createStackNavigator({
Home: HomeScreen,
});
HomeStack.navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === 'ios'
? `ios-home${focused ? '' : '-outline'}`
: 'md-home'
}
/>
),
};
const LinksStack = createStackNavigator({
Links: LinksScreen,
});
LinksStack.navigationOptions = {
tabBarLabel: 'Shops',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? `ios-list${focused ? '' : '-outline'}` : 'md-list'}
/>
),
};
const SettingsStack = createStackNavigator({
Settings: SettingsScreen,
});
SettingsStack.navigationOptions = {
tabBarLabel: 'Cart',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? `ios-cart${focused ? '' : '-outline'}` : 'md-cart'}
/>
),
};
export default createBottomTabNavigator({
HomeStack,
LinksStack,
SettingsStack,
});在标题中显示图标的MainTab文件
static navigationOptions = ({navigation}) =>({
title: 'Home',
headerLeft: <Ionicons
name="md-menu"
size={25}
color="blue"
style={{ margin: 7,}}
onPress={() => this.props.navigation.navigate('DrawerOpen')}
/>
});回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-03 06:42:44
Stack Overflow用户
发布于 2018-06-03 06:44:09
当您创建像这样的组件witch类时，您必须知道这一点
class MyComponent extends ....如果你想使用任何道具，你必须写这个KeyWord，例如
this.props.navigation.nvigate()但是，如果您使用箭头函数创建组件，则如下所示
const Mycomponent = (props) => {}你不需要这个KeyWord，对于call props，你必须这样写
props.navigation.navigate()在您的示例中，如果使用导航的组件内部选项，则不需要此选项或支持KeyWord，只需编写
navigation.navigate()页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50661359
复制相关文章
相似问题