typescript - 如何在 React Navigation 5 和 TypeScript 中键入 Tab Navigator

Question

import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import {
  BottomTabNavigationProp,
  createBottomTabNavigator,
} from '@react-navigation/bottom-tabs';
import { TabNavigationState } from '@react-navigation/native';


export type RootParamList = {
  Feed: undefined;
  Search: undefined;
};

export enum Screens {
  FEED = 'Feed',
  SEARCH = 'Search',
}
const Tabs = createBottomTabNavigator<RootParamList>();

export interface TabbarProps {
  navigation: BottomTabNavigationProp<RootParamList, Screens>;
  state: TabNavigationState<RootParamList>;
}

const TabBar = (props: TabbarProps) => {
  const handleTabPress = ({
    name,
    isCurrentTab,
  }: {
    name: keyof RootParamList;
    isCurrentTab: boolean;
  }) => {
    if (!isCurrentTab) {
      props.navigation.navigate(name);
    }
  };
  return (
    <View>
      {props.state.routes.map((route, index) => {
        const buttonText = route.name;
        const isCurrentTab = props.state.index === index;
        return (
          <TouchableOpacity
            key={index}
            onPress={() => handleTabPress({ name: route.name, isCurrentTab })}>
            <Text>{buttonText}</Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

const Nav = () => (
  <Tabs.Navigator
    tabBar={({ navigation, state }) => (
      <TabBar navigation={navigation} state={state} />
    )}>
    <Tabs.Screen name={Screens.FEED} component={View} />
    <Tabs.Screen name={Screens.SEARCH} component={View} />
  </Tabs.Navigator>
);

export default Nav;

<Tab.Navigator /> 有问题和 tabbar支柱。我似乎无法为我的特定 navigation 正确键入它和 state Prop 。

Answer 1

您可以使用 BottomTabBarProps 键入您的自定义组件，并最终使用您的自定义 Prop 。

import { BottomTabBarProps } from '@react-navigation/bottom-tabs/src/types'

const TabBar: React.FC<BottomTabBarProps /* & CustomProps */> = ({ state, descriptors, navigation }) => {
...
}