时间戳

首页 > 解决方案 > React Native：无法读取未定义的属性“导航”

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

问题描述

我正在尝试制作一个 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,
},
});

将不胜感激一个解决方案。谢谢！

标签： react-nativereact-navigationnative-base

解决方案

您应该将导航道具从父级传递给子级，如下所示：

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

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

推荐阅读