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

您应该从 NavigationContainer 导入 @react-navigation/native。 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>
  );
}

将导航传递给组件

1 个答案: