无法导航到另一个页面反应原生

Question

大家好，麻烦您了。我遇到了这个错误

TypeError: undefined is not an object (evalating '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",

帮助某人。谢谢。

#编辑#

在我的 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;

但现在我遇到了这个错误

错误：无法从 C:\Users\XXXXXXXXXXX\XXXXX\node_modules@react-navigation\stack\src\views\Header\Header.tsx 解析模块 react-native-safe-area-context：react-native-在项目或这些目录中找不到安全区域上下文： node_modules@react-navigation\stack\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 (Main) 中创建路由器

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