navigation.navigate 不是一个函数（未定义），js 引擎：hermes

Question

我想在导航之间移动，但是当我单击“查看菜单”时，它显示 TypeError: undefined is not a function, js engine: hermes ERROR

我想在导航之间移动，但是当我单击“查看菜单”时，它显示 TypeError: undefined is not a function, js engine: hermes ERROR

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

import MenuScreen from "./Screens/MenuScreen";
import WelcomeScreen from "./Screens/WelcomeScreen";
import LoginScreen from './LoginScreen';

const Stack = createNativeStackNavigator();

function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Welcome">
                <Stack.Screen name="Login" component={LoginScreen} />
                <Stack.Screen name="Menu" component={MenuScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

export default App;

---

欢迎屏幕js

    import * as React from 'react'; 
import { Text, View, Image, StyleSheet, Pressable } from 'react-native'; 

const WelcomeScreen = ({ navigation }) => { 
    return ( 
        <View style={styles.container}> 
            <Image 
                style={styles.logo} 
                source={require('../img/LittleLemonLogo.png')} 
          /> 
          <Text style={styles.title}> 
              Little Lemon, your local Mediterranean Bistro 
          </Text> 
          <Pressable onPress={() => navigation.navigate('Menu')}> 
              <Text style={styles.buttonText}>View Menu</Text> 
          </Pressable> 
        </View> 
      ); 
}; 

const styles = StyleSheet.create({
      logo: {
            height: 100,
            width: 300,
      },
      container: {
            flex: 1,
            padding: 24,
            marginTop: 25,
      },
      title: {
            marginTop: 16,
            paddingVertical: 10,
            color: '#333333',
            textAlign: 'center',
            fontSize: 20,
            fontWeight: 'bold',
      },
      buttonText: {
            color: '#333333',
            textAlign: 'center',
            fontSize: 32,
            padding: 10,
            marginVertical: 8,
            backgroundColor: '#fbdabb',
            borderColor: '#EDEFEE',
            borderWidth: 2,
            borderRadius: 12,
      },
});

export default WelcomeScreen;

菜单屏幕js

    import React from 'react';

import { View, Text, StyleSheet, SectionList } from 'react-native';

const menuItemsToDisplay = [
    {
        title: 'Appetizers',
        data: [
            { name: 'Hummus', price: '$5.00' },
            { name: 'Moutabal', price: '$5.00' },
            { name: 'Falafel', price: '$7.50' },
            { name: 'Marinated Olives', price: '$5.00' },
            { name: 'Kofta', price: '$5.00' },
            { name: 'Eggplant Salad', price: '$8.50' },
        ],
    },
    {
        title: 'Main Dishes',
        data: [
            { name: 'Lentil Burger', price: '$10.00' },
            { name: 'Smoked Salmon', price: '$14.00' },
            { name: 'Kofta Burger', price: '$11.00' },
            { name: 'Turkish Kebab', price: '$15.50' },
        ],
    },
    {
        title: 'Sides',
        data: [
            { name: 'Fries', price: '$3.00', id: '11K' },
            { name: 'Buttered Rice', price: '$3.00' },
            { name: 'Bread Sticks', price: '$3.00' },
            { name: 'Pita Pocket', price: '$3.00' },
            { name: 'Lentil Soup', price: '$3.75' },
            { name: 'Greek Salad', price: '$6.00' },
            { name: 'Rice Pilaf', price: '$4.00' },
        ],
    },
    {
        title: 'Desserts',
        data: [
            { name: 'Baklava', price: '$3.00' },
            { name: 'Tartufo', price: '$3.00' },
            { name: 'Tiramisu', price: '$5.00' },
            { name: 'Panna Cotta', price: '$5.00' },
        ],
    },
];

const Item = ({ item }) => (
    <View style={menuStyles.innerContainer}>
        <Text style={menuStyles.itemText}>{item.name} - {item.price}</Text>
    </View>
);


const Separator = () => <View style={menuStyles.separator} />;

const Footer = () => (
    <Text style={menuStyles.footerText}>
        All Rights Reserved by Little Lemon 2024
    </Text>
);

const MenuItems = () => {
    const renderItem = ({ item }) => <Item item={item} />;


    const renderSectionHeader = ({ section: { title } }) => (
        <Text style={menuStyles.sectionHeader}>{title} </Text>
    );

    return (
        <View style={menuStyles.container}>
            <SectionList
                keyExtractor={(item, index) => item + index}
                sections={menuItemsToDisplay}
                renderItem={renderItem}
                renderSectionHeader={renderSectionHeader}
                ListFooterComponent={Footer}
                ItemSeparatorComponent={Separator}></SectionList>
        </View>
    );
};


const menuStyles = StyleSheet.create({
    container: {
        flex: 0.95,
    },
    innerContainer: {
        paddingHorizontal: 40,
        paddingVertical: 20,
        backgroundColor: '#333333',
    },
    sectionHeader: {
        backgroundColor: '#fbdabb',
        color: '#333333',
        fontSize: 34,
        flexWrap: 'wrap',
        textAlign: 'center',
    },
    itemText: {
        color: '#F4CE14',
        fontSize: 32,
    },
    separator: {
        borderBottomWidth: 1,
        borderColor: '#EDEFEE',
    },
    footerText: {
        color: '#EDEFEE',
        fontSize: 20,
        flexWrap: 'wrap',
        textAlign: 'center',
    },
});

export default MenuItems;

Answer 1

导航器中缺少

WelcomeScreen

，而

initialRouteName

已定义。

<NavigationContainer>
  <Stack.Navigator initialRouteName="Welcome">
     <Stack.Screen name="Welcome" component={WelcomeScreen} />
     <Stack.Screen name="Login" component={LoginScreen} />
     <Stack.Screen name="Menu" component={MenuScreen} />
  </Stack.Navigator>
</NavigationContainer>