时间戳

首页 > 解决方案 > 无法导航到另一个组件 -> 错误：无法读取未定义的属性“导航”

javascript - 无法导航到另一个组件 -> 错误：无法读取未定义的属性“导航”

问题描述

在我的react native应用程序上，我有一个header，它包括：


export default class foto extends Component {
.
.
.
.
static navigationOptions = {
        headerTitle: <Titulo/>,
        headerTitleStyle: {
            color: 'white',
        },
        headerRight: <MenuIcon/>,
        headerLeft: <HomeIcon/>,
        headerStyle: {
            backgroundColor: '#d87c3a'
        }
};

}

我想，当我按下headerRight导航到一个组件时，问题是当我尝试时我收到一个错误消息：Cannot read property 'navigate' of undefined

<MenuIcon/>不在但在default class foto同一个文件中

菜单图标代码：

class MenuIcon extends React.Component{
    render(){
        return(
            <TouchableOpacity style={{marginRight:10}}>
                <Icon name={'md-menu'} size={26} color='white'
                onPress={() => this.props.navigation.navigate('menu')}/>
            </TouchableOpacity>
        )
    }
}

我的 StackNavigator 在App.js：

const AppNavigator = createStackNavigator({
  login2: {
    screen: Login2
  },
  foto: {
    screen: Foto
  },
  menu: {
    screen: Menu
  }
}, {
    initialRouteName: 'login2',
});




export default createAppContainer(AppNavigator);

我的进口：

import React, { Component } from 'react'
import { Text, View, ImageBackground, Image, TextInput, TouchableOpacity, TouchableHighlight, Button } from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import AsyncStorage from '@react-native-community/async-storage';
import Icon from 'react-native-vector-icons/Ionicons';

我该如何解决我的问题？

标签： javascriptreact-nativereact-navigation

解决方案

您需要将导航传递给您的导航，<MenuIcon/>因此您的导航将类似于以下内容：

const AppNavigator = createStackNavigator({
  login2: {
    screen: Login2
  },
  foto: {
    screen: Foto,
    navigationOptions: ({ navigation }) => ({
    headerTitle: <Titulo/>,
    headerTitleStyle: {
        color: 'white',
    },
    headerRight: <MenuIcon navigation={navigation}/>,
    headerLeft: <HomeIcon/>,
    headerStyle: {
        backgroundColor: '#d87c3a'
    }
     })
  },
  menu: {
    screen: Menu
  }
}, {
    initialRouteName: 'login2',
});


export default createAppContainer(AppNavigator);

这应该允许您从 MenuIcon 组件导航请注意，您不需要 Foto 类中的导航选项，并且不要忘记将 MenuIcon 和 HomeIcon 都导入到堆栈导航器页面

希望这可以解决您的问题。

推荐阅读