无法导航到另一个页面反应本机

Question

大家好，很抱歉给您带来麻烦。我有这个错误

TypeError: undefined is not an object (evaluating 'navigation.navigate')

这是我的代码

const HomeScreen = ({navigation}) => {

  return(
     <View>
         <FlatList
              horizontal
              contentContainerStyle={{paddingHorizontal: 30}}
              data={userBookingData}
              keyExtractor={(item) => item.id} 
              renderItem={({item}) => <NewOrderPopUp navigation={navigation} {...item}/>} />                     
      </View>
  );

}

function NewOrderPopUp({navigation, .....})
{
  return(
    <Pressable onPress={()=> navigation.navigate('../../screens/AcceptedBookingScreen/AcceptedBookingScreen')}>
  );

}

export default NewOrderPopUp;

我的包裹

    "@react-navigation/native": "^6.0.2",
    "@react-navigation/stack": "^6.0.6",

帮助某人。谢谢。

#edit#

在我的app.js


import React, {useState} from 'react';

// Import Navigators from React Navigation
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
// Import Screens
import HomeScreen from './src/screens/HomeScreen';
import AcceptedBookingScreen from './src/screens/AcceptedBookingScreen/AcceptedBookingScreen';

const Stack = createStackNavigator();

  const App = () => {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="HomeScreen">
          <Stack.Screen
            name="HomeScreen"
            component={HomeScreen}
            options={{headerShown: false}}
          />
          <Stack.Screen
            name="AcceptedBookingScreen"
            component={AcceptedBookingScreen}
            options={{headerShown: false}}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  };

export default App;

但现在我遇到了这个错误

Error: Unable to resolve module react-native-safe-area-context from C:\Users\XXXXXXXXXXX\XXXXX\node_modules@react-navigation\stack\src\views\Header\Header.tsx: react-native-safe-area-context could not be found within the project or in these directories: node_modules@react-navigation\stack\node_modules node_modules

Answer 1

我认为你需要这样尝试：

<Pressable onPress={()=> navigation.navigate('AcceptedBookingScreen')}>

并且在您的路由器中需要指定该路由

使用示例：

import { useNavigation } from '@react-navigation/native';

function NotificationsScreen() {
const navigation = useNavigation(); 
return(
<Button
        onPress={() => navigation.navigate('AcceptedBookingScreen')}
        title="Go to notifications"
      />
);
}

您可以在 app.js（主要）

中创建路由器

class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="AcceptedBookingScreen"
            component={AcceptedBookingScreen}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

无法导航到另一个页面反应本机

Could not navigate to another page react native

react-native

react-navigation

react-hooks