Javascript Can'；t导航到另一个组件->；错误：无法读取属性'；导航'；未定义的

在我的

react native

应用程序上，我有一个

标题，它包括：


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

}

App.js
上的我的StackNavigator：

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';

如何解决我的问题？
您需要将导航传递给您的
，这样您的导航将如下所示：

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);

const-AppNavigator=createStackNavigator({
登录2：{
屏幕：Login2
},
福托：{
屏幕：Foto，
导航选项：（{navigation}）=>({
标题：，
头饰样式：{
颜色：'白色'，
},
头灯：，
头左：，
头型：{
背景颜色：“#d87c3a”
}
})
},
菜单：{
屏幕：菜单
}
}, {
initialRouteName:'login2'，
});
导出默认createAppContainer（AppNavigator）；

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

希望这能解决您的问题。
您需要将导航传递给您的
，这样您的导航将如下所示：

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);

const-AppNavigator=createStackNavigator({
登录2：{
屏幕：Login2
},
福托：{
屏幕：Foto，
导航选项：（{navigation}）=>({
标题：，
头饰样式：{
颜色：'白色'，
},
头灯：，
头左：，
头型：{
背景颜色：“#d87c3a”
}
})
},
菜单：{
屏幕：菜单
}
}, {
initialRouteName:'login2'，
});
导出默认createAppContainer（AppNavigator）；

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

希望这能解决您的问题。
不是reactr的专业人士，但在任何类型的javascript中使用“this”都不是一个好主意oO@jonathanHeindl我只是像文档中所说的那样，你的导入是什么？我已经在我的问题中添加了我注意到的唯一区别是，在示例中，它周围有一个视图元素，也许是这样重要的不是reactr的专业人士，但在任何类型的javascript中使用“this”都不是一个好主意oO@jonathanHeindl我只是按照文档中的说明做什么是你的导入？我已经在我的问题中添加了唯一的区别，我注意到在示例中它周围有一个视图元素，这可能很重要谢谢！它解决了我的问题。最后一个问题，对于我所有有标题的屏幕，我应该像这样继续吗？当然，你可以遵循这个方法谢谢！它解决了我的问题。最后一个问题，对于我所有有标题的屏幕，我应该像这样继续吗？当然，你可以遵循这个方法