导航在抽屉​​内容中未定义

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 中，它抱怨 props 没有定义，我一开始不知道如何传递它。

Answer 1

这对我有用

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

Answer 2

这是我的解决方案：

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>
    );