React Navigation 自定义标签 TypeScript 参数
我正在使用 Typescript 语言和 React Native 库开发项目。在创建自定义标签栏时,参数包括 state、descriptors 和 navigation。我应该为它们指定什么类型?
import { View, Text, TouchableOpacity } from 'react-native';
function MyTabBar({ state, descriptors, navigation }) {
const focusedOptions = descriptors[state.routes[state.index].key].options;
if (focusedOptions.tabBarVisible === false) {
return null;
}
return (
<View style={{ flexDirection: 'row' }}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
........
答案#1
- Top Tab Navigator="MaterialTopTabBarProps"
- 底部标签栏="BottomTabBarProps"
import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
import { MaterialTopTabBarProps } from '@react-navigation/material-top-tabs';
答案#2
interface TabBarProps {
state: TabNavigationState<ParamListBase>;
descriptors: BottomTabDescriptorMap;
navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>;
}
const MyTabBar = ({ state, descriptors, navigation }: TabBarProps) => {
...
