react-native - Uncaught Error: undefined is not an object (evaluating 't.props.navigation.navigate') touchableHandlePress@[native code]

Question

I am creating a component called HomeIcon and inserting it in my header via defaultNavigationOptions > headerRight, I added an onPress in this component by assigning this.props.navigation.navigate('Main'); with the purpose that clicking on this component loads the MainScreen but when I click the error described in the above heading occurs. Here's the code:

import React from 'react';
import { StyleSheet, TouchableOpacity, Image, Dimensions } from 'react-native';

export default class HomeIcon extends React.Component {
  render() {
    return (
      <TouchableOpacity onPress={() => {
        this.props.navigation.navigate('Main');
      }}>
        <Image style={styles.buttonHome} source={require('../icons/home2.png')} />
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  buttonHome: {
    aspectRatio: 1,
    resizeMode: 'contain',
    height: Dimensions.get('window').width * 0.08,
    width: Dimensions.get('window').height * 0.08,
    margin: Dimensions.get('window').height * 0.018
    }
});

import React from 'react';
import { createAppContainer, createStackNavigator } from 'react-navigation';
import Main from './source/screens/MainScreen';
import CustomCards from './source/screens/CustomCardsScreen';
import HomeIcon from './source/components/HomeIcon';

const AppNavigator = createStackNavigator ({
  'Main': {
    screen: Main,
    navigationOptions: {
      title: 'Tela Principal'
    }
  },
  'CustomCards': {
    screen: CustomCards,
    navigationOptions: {
      title: 'Cartões Personalizados'
    }
  }
}, {
  defaultNavigationOptions: {
    headerTitleStyle: {
      flexGrow: 1,
      fontWeight: 'bold',
      textAlign: 'center'
    },
    headerLeft: (null),
    headerRight: (
      <HomeIcon />
    ),
    headerStyle:{
      backgroundColor: '#7d253b'
    },
    headerTintColor: '#FFF'
  }
});

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "@types/react": "^16.8.13",
    "@types/react-native": "^0.57.43",
    "expo": "^32.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-navigation": "^3.6.1"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  },
  "private": true
}

Visit the project repository in GitHub for more details: https://github.com/Alex-Xavier/ACTIFICA

标签： react-nativereact-navigationexpo

Answer 1

You need to pass a navigation object to that component. 'this.props.navigation' only available in a screens that is directly assign to stack/tab/drawer navigation. In your case it's screens 'Main' and 'CustomCards'

HomeIcon component have no idea what is a this.props.navigation.

You have to pass 'navigation' as a props. Like so:

 headerRight: ({ navigation }) => <HomeIcon  navigation={navigation}/>

Then in you HomeIcon it's will be available as this.props.navigation.