Question

我正在尝试创建onPress函数，以便单击菜单图标时，抽屉导航将打开。但是，我收到此错误：未处理的JS异常：无法读取未定义的属性“导航”。

这是我的HeaderComponent.js代码

import React from 'react';
import { StyleSheet } from 'react-native';
import { Header, Left, Icon, Body, Title, Right } from 'native-base';

const HeaderComponent = (props) => {
const { menuIconStyle } = styles;

return (
    <Header>
        <Left>
            <Icon
                style={menuIconStyle}
                name="menu"
                onPress={() => this.props.navigation.openDrawer()}
            />
        </Left>
        <Body>
            <Title>{props.headerText}</Title>
        </Body>
        <Right>

        </Right>
    </Header>
);
}

export default HeaderComponent;

const styles = StyleSheet.create({
menuIconStyle: {
    paddingLeft: 15,
},
});

希望能找到解决方案。谢谢！

Answer 1

您应该将导航道具从父母那里传递给孩子，像这样：

<HeaderComponent navigation={this.props.navigation} />

然后您可以在子组件中使用导航

Answer 2

您的组件不是ES6类，而是一个函数。因此，您不能使用this.props，因为它不存在。

onPress={() => props.navigation.openDrawer()}

改用它。

React Native：无法读取未定义的属性“导航”

2 个答案: