React Native 底部选项卡导航器元素不可分配

Question

我是 React 的新手，我使用 Expo Go 创建了一个应用程序，其中包含 React Bottom Tab Navigator (https://reactnavigation.org/docs/bottom-tab-navigator/)。我的问题是示例没有定义

{navigation}

参数的类型，我想解决这个问题。

注意：它在没有定义类型的情况下工作，但我想学习和理解如何修复它......

我有一个

Navigation.tsx

包含我的根堆栈和选项卡（我希望我将它限制在相关部分）

const Stack = createNativeStackNavigator();

declare global {
    namespace ReactNavigation {
        interface RootParamList extends RootStackParamList { }
    }
}

type RootStackParamList = {
    Tabs: NavigatorScreenParams<RootTabParamList> | undefined;
    Modal: undefined;
    NotFound: undefined;
};

export type RootStackScreenProps<Screen extends keyof RootStackParamList> = NativeStackScreenProps<
    RootStackParamList,
    Screen
>;

const BottomTab = createBottomTabNavigator<RootTabParamList>();

type RootTabParamList = {
    About: undefined;
    Test: undefined;
};

export type RootTabScreenProps<Screen extends keyof RootTabParamList> = CompositeScreenProps<
    BottomTabScreenProps<RootTabParamList, Screen>,
    NativeStackScreenProps<RootStackParamList>
>;

export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
    return (
        <NavigationContainer
            linking={LinkingConfiguration}
            theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}
        >
            <Stack.Navigator>
                <Stack.Screen name="Tabs" component={BottomTabNavigator} options={{ headerShown: false }}/>
                // (!) Problem line
                <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }}/>
                <Stack.Group screenOptions={{ presentation: 'modal' }}>
                    <Stack.Screen name="Modal" component={ModalScreen} />
                </Stack.Group>
            </Stack.Navigator>
        </NavigationContainer>
    );
}

我在其中一个选项卡中找到了

{navigation}

的正确类型，例如

About.tsx

：

import React from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';

import { Text, View } from '../ui/Components';
import { RootTabScreenProps } from '../ui/Navigation';

export default function About({ navigation }: RootTabScreenProps<'About'>) {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>About</Text>
      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
      <Text>/screens/About.tsx</Text>
      <TouchableOpacity onPress={() => navigation.replace('Tabs')}>
        <Text>Go to home screen!</Text>
      </TouchableOpacity>
    </View>
  );
}

但是我在根组件（没有选项卡）中找不到

{navigation}

的正确类型，例如

NotFound.tsx

：

import React from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';

import { Text, View } from '../ui/Components';

// (!) Problem line
export default function NotFoundScreen({ navigation }: ?????) {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>This screen doesn't exist.</Text>
      <TouchableOpacity onPress={() => navigation.replace('Tabs')} style={styles.link}>
        <Text style={styles.linkText}>Go to home screen!</Text>
      </TouchableOpacity>
    </View>
  );
}

没有类型，我（当然）在

NotFound.tsx

中得到一个错误，那个

绑定元素“导航”隐式具有“任意”类型。

我试过

RootStackScreenProps<'NotFound'>

，这会让上面的错误消失，但是我在

Navigation.tsx

在线

<Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }}/>

:

中得到一个错误

Type '({ navigation }: RootStackScreenProps<"NotFound">) => Element' 不可分配给类型 'ScreenComponentType |未定义'.
类型 '({ navigation }: RootStackScreenProps<"NotFound">) => Element' 不可分配给类型 'FunctionComponent<{}>'。
参数类型“__0”和“props”不兼容。
类型“{}”缺少类型“RootStackScreenProps<"NotFound">”中的以下属性：导航、路线

所以... 在这里使用什么类型是正确的？

Answer 1

react navigation 是用 typescript 编写的，所以你需要的任何类型都可能存在。 这里 他们介绍了如何键入 Stack Navigator，以及底部选项卡导航器的相同前提。您只需要导出

RootStackParamList

并导入

BottomTabScreenProps

：

import React from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
import { BottomTabScreenProps } from "@react-navigation/bottom-tabs";
import {RootStackParamList} from '../path/to/Navigator';

import { Text, View } from '../ui/Components';
// dont need to do this
//import { RootTabScreenProps } from '../ui/Navigation';

type Props = BottomTabScreenProps<RootStackParamList,"About">

export default function About({ navigation }: Props) {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>About</Text>
      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
      <Text>/screens/About.tsx</Text>
      <TouchableOpacity onPress={() => navigation.replace('Tabs')}>
        <Text>Go to home screen!</Text>
      </TouchableOpacity>
    </View>
  );
}