抽屉内容中未定义导航

Question

我目前正在尝试使用typescript构建一个React Native项目。我的屏幕配置如下：

export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
return (
<NavigationContainer linking={LinkingConfiguration} theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
<DrawerNavigator />
</NavigationContainer>
);
}
const Drawer = createDrawerNavigator<DrawerStackParamList>();
function DrawerNavigator() {
const navigation = useNavigation<NavigationProps>();
return (
<Drawer.Navigator drawerContent={() => <DrawerContent navigation={navigation} />}>
<Drawer.Screen name='Root' component={RootNavigator} />
<Drawer.Screen name='ManageCities' component={ManageCities} />
</Drawer.Navigator>
);
}
const Stack = createStackNavigator<RootStackParamList>();
function RootNavigator() {
return (
<Stack.Navigator>
<Stack.Screen name='Root' component={BottomTabNavigator} options={{ headerShown: true, headerLeft: () => <Header /> }} />
<Stack.Screen name='NotFound' component={NotFoundScreen} options={{ title: 'Oops!', headerShown: true, headerLeft: () => <Header /> }} />
</Stack.Navigator>
);
}
function Header() {
const navigation = useNavigation<NavigationProps>();
return <Ionicons size={30} name='ios-menu' color='white' onPress={() => navigation.toggleDrawer()} />;
}

抽屉内容：

import React, { FunctionComponent } from 'react';
import { View } from '../components/Themed';
import { DrawerContentScrollView, DrawerItem } from '@react-navigation/drawer';
import { NavigationProps } from '../types';
type DrawerContentProps = {
navigation?: NavigationProps;
};
const DrawerContent: FunctionComponent<DrawerContentProps> = ({ navigation }) => {
const arr = ['city1', 'city2'];
return (
<View style={{ flex: 1 }}>
<DrawerContentScrollView>
{arr.map(
(value): JSX.Element => {
return <DrawerItem key={value} label={value} onPress={() => console.log(value)} />;
},
)}
<DrawerItem label='Manage Cities' onPress={() => navigation.navigate('ManageCities')} />
</DrawerContentScrollView>
</View>
);
};
export default DrawerContent;

当我尝试运行应用程序时，我得到以下错误：

Error: Couldn't find a navigation object. Is your component inside a screen in a navigator?
This error is located at:
in DrawerNavigator
in EnsureSingleNavigator (created by ForwardRef(BaseNavigationContainer))
in ForwardRef(BaseNavigationContainer) (created by ForwardRef(NavigationContainer))
in ThemeProvider (created by ForwardRef(NavigationContainer))
in ForwardRef(NavigationContainer) (created by Navigation)
in Navigation (created by App)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in DevAppContainer (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer

我还尝试在抽屉内容中使用useNavigation挂钩，但遇到了同样的错误。

实际上，我最初的问题是，我不知道如何将导航作为道具传递给DrawerNavigator。当使用Javascript时，您可以传递道具，默认情况下它内部有导航。然而，在Typescript中，它抱怨道具没有定义，我一开始不知道如何传递它。

Answer 1

这是我的解决方案：

function DrawerNavigator() {
return (
<Drawer.Navigator drawerContent={DrawerContent}>
<Drawer.Screen name='Root' component={RootNavigator} />
<Drawer.Screen name='ManageCities' component={ManageCities} />
</Drawer.Navigator>
);
}

当我更改抽屉内容如下时，导航道具不再未定义：

const DrawerContent: FunctionComponent<DrawerContentComponentProps> = ({ navigation }) => {
const arr = ['city1', 'city2'];
return (
<View style={{ flex: 1 }}>
<DrawerContentScrollView>
{arr.map(
(value): JSX.Element => {
return <DrawerItem key={value} label={value} onPress={() => console.log(value)} />;
},
)}
<DrawerItem label='Manage Cities' onPress={() => navigation.navigate('ManageCities')} />
</DrawerContentScrollView>
</View>
);

Answer 2

这适用于我的

function DrawerScreens() {
return (
<DrawersNavigation.Navigator drawerContent={(props) => <DrawerNavigation  {...props} />} screenOptions={navigationOptions}>
...
</DrawersNavigation.Navigator>
);
}