Reactive navigation error: The action 'NAVIGATE' with payload {"name":"Dict-CodePudding

I am a beginner of react native. After reading the reactive navigation basics, I'm trying to build my personal app. However, I have a difficulty of navigation to another components.

I only have the following components:

app.js

import { StatusBar } from 'expo-status-bar';
import { Button, StyleSheet, Text, View, TextInput, Image } from 'react-native';
import * as React from 'react';
import { NavigationContainer, StackActions } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Dict from './dict';

const Stack = createNativeStackNavigator();

const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ height: '100%' }}>
      <View style={{
        height: '15%', backgroundColor: 'powderblue', flexDirection:'row'
      }} />
      <Text>This is a test</Text>
      <Button title="Go to Dictionary" onPress={() => navigation.navigate('Dict')}/>
    </View>
  );
};

export default function App() {
  
  return (
    <NavigationContainer>
      <Stack.Navigator>
      <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ headerShown: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

dict.js

import React from 'react';
import { Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';


function Dict () {
  return (
    <Text>Hello, I am your cat!</Text>
  );
}

export default Dict;

When I click the button Go to Dictionary, I've received the following error message: The action 'NAVIGATE' with payload {"name":"Dict"} was not handled by any navigator. Do you have a screen named 'Dict'?

What I want to achieve is jump to the dictionary page via a button click. Thank you for your help!

CodePudding user response：

You have to create your Dict screen in your Navigator, try this:

export default function App() {
  
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="Dict"
          component={Dict}
          options={{ headerShown: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}