将导航传递给组件

Question

我正在尝试将导航（使用 React Navigation 5）传递给我的 stackNavigation 中的组件。这是我的代码：

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

const MyStack = new createStackNavigator();

const MyStackNav = () => {

   const navigation = useNavigation();

   return(
      <MyStack.Navigator screenOptions={{ headerShown: false }}>
         <MyStack.Screen name="Comp1" component={Component1} />
         <MyStack.Screen name="Comp2" component={Component2} />
      </MyStack.Navigator>
   );
}

export default MyStackNav;

我试过了，但是出错了：

<MyStack.Screen name="Comp1" component={(navigation) => <Component1 navigation={navigation} />} />

如何将navigation 传递给我的组件，即Component1 和Component2。顺便说一句，这些是类组件。

Answer 1

您应该从@react-navigation/native 导入NavigationContainer。 MyStack.Screen 中的每个组件都会收到一个 prop navigation。

来自documentation的示例：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>{/* ... */}</Stack.Navigator>
    </NavigationContainer>
  );
}