未定义不是一个对象(评估';_this.pros.导航';) [英] Getting undefined is not an object (evaluating '_this.props.navigation')
本文介绍了未定义不是一个对象(评估';_this.pros.导航';)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用DrawerNavigator
,我有3页:Router page
、mainScreen
和photos page
。
我做了一个标题导航栏区域,我用这个<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
在Main Screen中打开了抽屉菜单,在照片页面中也使用了这个菜单,菜单在Main Screen中是可以的,但当我在照片页面中点击<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
时,我得到错误:
undefined is not an object (evaluating '_this.props.navigation')
我如何修复它?
我的照片页面:
import React from 'react';
import { Button, ScrollView, View, Text, StyleSheet, TouchableHighlight } from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Icon from 'react-native-vector-icons/FontAwesome'
const MyNavScreen = ({ navigation }) => (
<View>
<View style={styles.containerNavbar}>
<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
<Icon name="bars" size={30} color="#fff" />
</TouchableHighlight>
<Text style={styles.navbarTitle}>Photos</Text>
</View>
<ScrollView>
<View><Text>photo</Text></View>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
</ScrollView>
</View>
);
const MyPhotosHomeScreen = ({ navigation }) => (
<MyNavScreen navigation={navigation} />
);
MyPhotosHomeScreen.navigationOptions = {
title: 'Photos',
drawerIcon: ({ tintColor }) => (
<MaterialIcons
name="photo"
size={24}
style={{ color: tintColor }}
/>
),
};
export default MyPhotosHomeScreen;
主屏幕:
export default class MainScreen extends React.Component {
static navigationOptions = {
drawerLabel: 'Home',
drawerIcon: ({ tintColor }) => (
<MaterialIcons
name="home"
size={24}
style={{ color: tintColor }}
/>
)
};
render() {
return (
<View>
<View style={styles.containerNavbar}>
<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
<Icon name="bars" size={30} color="#fff" />
</TouchableHighlight>
<Text style={styles.navbarTitle}>mainScreen</Text>
</View>
<View>
<View style={styles.containerFooter}>
<Text style={styles.footerTitle}>Footer</Text>
</View>
</View>
</View>
)
}
}
推荐答案
可能我忽略了什么,但它看起来就像是一个简单的Java脚本错误。您正在销毁纯组件中的道具MyNavScreen
:
const MyNavScreen = ({ navigation }) => (
这意味着您无权访问this.props
。您只需访问非结构化道具navigation
。因此出现未定义错误的原因,因为这实际上是未定义的:
<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
如果您将其更改为直接使用navigation
,则它应该可以工作:
<TouchableHighlight onPress={() => navigation.navigate('DrawerOpen')}>
在mainScreen
上,您很好,因为它不是带有非结构化参数的纯组件。因此您仍可以访问render()
中的this.props
。
如果这给您带来了麻烦,您应该重新学习destructing。
这篇关于未定义不是一个对象(评估';_this.pros.导航';)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文