Undefined this.props.navigation when using it in App.js inside Stack Screen component

问题

I need to use navigation when pressing the bag icon in the header. When I press it, I get the following error:

undefined is not an object (evaluating '_this.props.navigation')

The thing is I need to use it inside a Stack.Screen component, but props.navigation always return undefined.

App.js file:

import React, { Component } from 'react';
import {
  Button,
  Text,
  TextInput,
  View,
  StyleSheet,
  TouchableOpacity,
  Image,
} from 'react-native';
import { Header } from 'react-navigation-stack';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import TelaInicial from './components/telaInicial';
import TelaCarrinho from './components/telaCarrinho';

const Stack = createStackNavigator();

export default function AppContainer() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Inicial">
        <Stack.Screen
          name="Inicial"
          component={TelaInicial}
          options={{
            title: '',
            headerTintColor: 'white',
            headerStyle: { backgroundColor: '#6b39b6', height: 100 },
            height: Header.height,
            headerLeft: null,
            headerTitle: (
              <View>
                <TouchableOpacity
                  onPress={() => {
                    this.props.navigation.navigate('Carrinho');
                  }}>
                  <Image
                    style={{
                      width: 29,
                      height: 29,
                      marginTop: 0,
                      marginLeft: 170,
                    }}
                    source={require('./assets/shopping bag.png')}
                  />
                </TouchableOpacity>
              </View>
            ),
          }}
        />
        <Stack.Screen
          name="Carrinho"
          component={TelaCarrinho}
          options={{
            title: '',
            headerTintColor: 'white',
            headerStyle: { backgroundColor: '#6b39b6', height: 100 },
            height: Header.height,
            headerBackTitle: 'Voltar',
            headerTitle: 'Carrinho'.toUpperCase(),
            headerTitleStyle: {
              fontSize: 17,
              fontWeight: 600,
            },
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Do you guys have any idea how I can fix it?

I have a link to Expo: https://snack.expo.io/@rapolasls/eager-crackers

Thank you!

回答1:

Per React Navigation v5 documentation on createStackNavigator, the header property can be either an object or function.

We use it as a function below to gain access to navigation property. 👍

import React from "react";
import { View, Text, TouchableOpacity, } from "react-native";
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const Placeholder = (props) => {
  const {
    name,
    backgroundColor,
  } = props;
  return (
    <View style={{ flex: 1, backgroundColor, justifyContent: "center", alignItems: "center", }}>
      <Text style={{ fontSize: 20, color: "white", }}>{ name }</Text>
    </View>
  )
}

const ScreenA = (props) => {
  return <Placeholder name="Screen A" backgroundColor="steelblue" />
}

const ScreenB = (props) => {
  return <Placeholder name="Screen B" backgroundColor="tomato" />
}

const RootNavigator = () => {    
    return ( 
      <Stack.Navigator>
        <Stack.Screen component={ScreenA} name="a" options={({ navigation }) => {
          // navigation object available           
          const navigateToB = () => { navigation.navigate("b") };

          return {
            headerTitle: () => {
              return (
                <TouchableOpacity onPress={navigateToB} style={{  backgroundColor: "green", justifyContent: "flex-end", alignItems: "center", }}>
                  <Text style={{ fontSize: 20, color: "white", }}>{ "Screen A" }</Text>
                </TouchableOpacity>
              )  
            }
          }
        }} />
        <Stack.Screen component={ScreenB} name="b" options={{ headerTitle: "Screen B" }} />
      </Stack.Navigator>
    );
}

export default function() {
    return ( 
      <NavigationContainer>
        <RootNavigator />
      </NavigationContainer>
    );
}

来源：https://stackoverflow.com/questions/62290207/undefined-this-props-navigation-when-using-it-in-app-js-inside-stack-screen-comp