正确键入路线.自定义底部选项卡栏中的参数

Question

我无法正确键入route。底部选项卡导航器的参数。例如，导航器和参数类型如下:

export type BottomTabParamList = {
ListScreen: { i18nKey: string };
DetailsScreen: { i18nKey: string };
OptionsStackNavigator: { i18nKey: string };
};
const MainAppBottomTabs = createBottomTabNavigator<BottomTabParamList>();

我使用自定义标签栏组件。在该选项卡栏组件中，我将另一种类型(用于一些redux道具)与BottomTabBarProps相结合。然后我使用.map，它使用导航状态:

type ScreenProps = BottomTabBarProps & {
reduxProp1: number;
reduxProp2: number;
};
const TabBar = (screenProps: ScreenProps): JSX.Element => {
return <View>
// do stuff with each route here like
// return state.routes.map((route, index) => {
// const { i18nKey } = route.params;
</View>;
};

编辑:这是底部选项卡导航器创建代码:

const MainAppBottomTabs = createBottomTabNavigator<BottomTabParamList>();
const MainAppBottomTabsNavigator = (): JSX.Element => {
return (
<MainAppBottomTabs.Navigator
initialRouteName="ListScreen"
screenOptions={{
headerShown: false
}}
tabBar={(props: BottomTabBarProps) => (
<TabBar
state={props.state}
navigation={props.navigation}
descriptors={props.descriptors}
insets={props.insets}
/>
)}>
<MainAppBottomTabs.Screen
name="ListScreen"
component={ListScreen}
initialParams={{
i18nKey: 'list'
}}
/>
<MainAppBottomTabs.Screen
name="DetailsScreen"
component={DetailsScreen}
initialParams={{
i18nKey: 'details'
}}
/>
<MainAppBottomTabs.Screen
name="OptionsStackNavigator"
component={OptionsStackNavigator}
initialParams={{
i18nKey: 'options'
}}
/>
</MainAppBottomTabs.Navigator>
);
};

表示类型{}上不存在i18nKey。我怎样才能让它正确识别字体?

Answer 1

您可以这样尝试:

interface Props extends BottomTabScreenProps<BottomTabParamsList, 'ListScreen'> {
reduxProp1: string;
reduxProp2: string;
}
export default function TabOneScreen({ navigation, route }: Props) {
const i18Key = route.params.i18nKey;

当然你也可以使用类型来代替接口，比如:

type Props = BottomTabScreenProps<RootTabParamList, 'ListScreen'> & {
reduxProp1: string;
reduxProp2: string;
}

Answer 2

您可以使用

const { i18nKey } = route.params as any;

然后检查是否定义了i18nKey