React Native undefined不是对象（评估'HomeScreen.props.navigation'）

Question

我在按左侧元素图标时尝试导航到react导航标题上的另一个屏幕。

错误：React native Undefined不是对象（评估'HomeScreen.props.navigation'）

这是错误的图片

使用：expo，反应导航v3和用户头像显示用户的个人资料图片（这将重定向到用户的个人资料）

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity, Image, SafeAreaView, FlatList} from 'react-native';
import CardStack, { Card } from 'react-native-card-stack-swiper';
import UserAvatar from 'react-native-user-avatar';
import GradientButton from 'react-native-gradient-buttons';
import { createStackNavigator, createAppContainer, createDrawerNavigator } from 'react-navigation';
import Drawer from 'react-native-drawer';


class HomeScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
    headerLeft: (
      <TouchableOpacity onPress={() => this.props.navigation.navigate('Profile')}>
          <UserAvatar style={{marginLeft: 15}} size="28" name="User Test" color="#000"/>
      </TouchableOpacity>
    ),
    headerTitle: (
       <View style={{flex:1, flexDirection:'row', justifyContent:'center', marginRight: 5}}>
          <Image resizeMode="cover" style={{width:98, height:25}} source={require('./src/images/logo.png')}/>
      </View>
    ),
    headerRight:(
      <TouchableOpacity>
        <Image style={{width:28, height:28, marginRight: 15}} source={require('./src/images/share.png')}/>
      </TouchableOpacity>
    ),
  };
  };

  render() {
    return (
      <View style={styles.container}>
         <View style={styles.content}>
              <View style={styles.cardContainer}>
                <Card style={styles.card}><Text style={styles.label} onPress={() => this.props.navigation.navigate('Feed')}>A</Text></Card>
              </View>
            <View style={styles.buttonContainer}>
              <TouchableOpacity onPress={() => this.props.navigation.navigate('Feed')}>
                <Image style={{width:220, height:55}} source={require('./src/images/button.png')} onPress={() => this.props.navigation.navigate('Feed')}/>
              </TouchableOpacity>
            </View>
          </View>
        </View>
    );
  }
}

export default HomeScreen;

const drawerStyles = {
  drawer: {
      flex: 1.0,
      backgroundColor: '#2E2E2E'
  },
  main: {
      flex: 1.0,
      backgroundColor: 'white'
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#EFF2F5'
  },
  buttonContainer:{
    flex: 1,
    flexDirection:'row',
    justifyContent:'center',
    position: 'absolute',
    alignSelf: 'center',
    marginTop: 30,
  },
  cardContainer:{
    flexDirection:'row',
    justifyContent:'center',
    marginTop: 55,
  },
  card:{
    width: 312,
    height: 476,
    backgroundColor: '#fff',
    borderRadius: 25,
    shadowColor: 'rgba(0,0,0,0.9)',
    shadowOffset: {
      width: 50,
      height: 5
    },
    shadowOpacity:0.5,
  },
  label: {
    lineHeight: 400,
    textAlign: 'center',
    fontSize: 55,
    fontFamily: 'System',
    color: '#000',
    backgroundColor: 'transparent',
  },

});

这是app.js文件

  import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity, Image, SaveAreaView, ScrollView} from 'react-native';
import { createStackNavigator, createAppContainer, createDrawerNavigator } from "react-navigation";

import HomeScreen from './layout_home.js';
import FeedScreen from './layout_feed.js';
import ProfileScreen from './layout_profile.js';


const AppStackNavigator = createStackNavigator({
  Home: {
      screen: HomeScreen
  },
  Feed: {
      screen: FeedScreen
  },
  Profile: {
      screen: ProfileScreen
  },
})

export default createAppContainer(AppStackNavigator);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#808080'
  },

});

Answer 1

您已经传递了导航参数。

您必须将其更改为下面的代码。

 return {
    headerLeft: (
      <TouchableOpacity onPress={() => navigation.navigate('Profile')}>
          <UserAvatar style={{marginLeft: 15}} size="28" name="User Test" color="#000"/>
      </TouchableOpacity>
    ),