在具有React Native的App.js中使用this.props.navigation的问题。如何正确使用它？

Question

按下标题中的包图标时，我需要使用导航。当我按它时，出现以下错误：

未定义不是对象（正在评估'_this.props.navigation'）]

Screen with bag icon in the header

App.js文件：

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

似乎很容易使它起作用，但是我尝试了许多替代方法，但是没有起作用。你们知道我该如何解决吗？

我有一个博览会链接：https://snack.expo.io/@rapolasls/eager-crackers

谢谢！

Answer 1

尝试这样：-

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
 return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  <Text>Home Screen</Text>
  <Button
    title="Go to Details"
    onPress={() => navigation.navigate('Details')}
  />
</View>
 );
  }

 function DetailsScreen() {
 return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  <Text>Details Screen</Text>
</View>
 );
}

const Stack = createStackNavigator();

function App() {
 return (
<NavigationContainer>
  <Stack.Navigator initialRouteName="Home">
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Details" component={DetailsScreen} />
  </Stack.Navigator>
</NavigationContainer>
 );
  }

 export default App;

source

希望有帮助！