[英]How to type Tab Navigator in react navigation 5 and TypeScript
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;
There is an issue with <Tab.Navigator />
and the tabbar
prop. <Tab.Navigator />
和tabbar
属性存在问题。 I can't seem to type it correctly for my specific navigation
and state
props.我似乎无法为我的特定
navigation
和state
道具正确键入它。
Late to answer, even I was stuck with the same issue, following changes helped me,迟到了,即使我也遇到了同样的问题,以下变化帮助了我,
Please note I have used type instead of interface, interface will also work.
请注意,我使用了类型而不是接口,接口也可以使用。
In your TabBar,在您的标签栏中,
Instead of代替
export interface {
navigation: BottomTabNavigationProp<RootParamList, Screens>;
state: TabNavigationState<RootParamList>;
}
Use利用
type TabbarProps = {
navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>;
state: TabNavigationState<ParamListBase>;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.