在 expo bottomtabs 中正确设置参数

Question

很难理解这个最新的世博会底部标签

我在 node_module 上没有看到 bottomtabs 或任何 params 属性的初始参数...有人这样做过吗？本质上，我们有两个底部选项卡的组件，并且根据该选项卡具有不同的效果。

那么 1. 我们可以将 Params 传递给 bottomTabs 吗？ 2. 如果有怎么办？

我们得到的 TS 错误是：

预期的类型来自属性“initialParams”，该属性在此处声明类型为“IntrinsicAttributes & RouteConfig'

    <BottomTab.Screen
    name="Episodes"
    component={EpisodesScreen}
    initialParams={{
      type: "episodes",
    }}
    options={{
      title: 'Episodes',
      tabBarIcon: ({ color }) => <TabBarFeatherIcon name="headphones" color={color} />,
    }}
    />
    <BottomTab.Screen
    name="TabThree"
    component={EpisodesScreen}
    initialParams={{
      type: "quickGuides",
      displayType: "grid",
    }}

来自 node_module::

  import {
  createNavigatorFactory,
  DefaultNavigatorOptions,
  ParamListBase,
  TabActionHelpers,
  TabNavigationState,
  TabRouter,
  TabRouterOptions,
  useNavigationBuilder,
  } from '@react-navigation/native';
  import * as React from 'react';
  import warnOnce from 'warn-once';

import type {
  BottomTabNavigationConfig,
  BottomTabNavigationEventMap,
  BottomTabNavigationOptions,
 } from '../types';
import BottomTabView from '../views/BottomTabView';

type Props = DefaultNavigatorOptions<
ParamListBase,
TabNavigationState<ParamListBase>,
BottomTabNavigationOptions,
BottomTabNavigationEventMap
> &
TabRouterOptions &
BottomTabNavigationConfig;

function BottomTabNavigator({
initialRouteName,
backBehavior,
children,
screenListeners,
screenOptions,
sceneContainerStyle,
...restWithDeprecated
}: Props) {
const {
// @ts-expect-error: lazy is deprecated
lazy,
// @ts-expect-error: tabBarOptions is deprecated
tabBarOptions,
...rest
} = restWithDeprecated;

let defaultScreenOptions: BottomTabNavigationOptions = {};

if (tabBarOptions) {
Object.assign(defaultScreenOptions, {
  tabBarHideOnKeyboard: tabBarOptions.keyboardHidesTabBar,
  tabBarActiveTintColor: tabBarOptions.activeTintColor,
  tabBarInactiveTintColor: tabBarOptions.inactiveTintColor,
  tabBarActiveBackgroundColor: tabBarOptions.activeBackgroundColor,
  tabBarInactiveBackgroundColor: tabBarOptions.inactiveBackgroundColor,
  tabBarAllowFontScaling: tabBarOptions.allowFontScaling,
  tabBarShowLabel: tabBarOptions.showLabel,
  tabBarLabelStyle: tabBarOptions.labelStyle,
  tabBarIconStyle: tabBarOptions.iconStyle,
  tabBarItemStyle: tabBarOptions.tabStyle,
  tabBarLabelPosition:
    tabBarOptions.labelPosition ??
    (tabBarOptions.adaptive === false ? 'below-icon' : undefined),
  tabBarStyle: [
    { display: tabBarOptions.tabBarVisible ? 'none' : 'flex' },
    defaultScreenOptions.tabBarStyle,
  ],
});

(
  Object.keys(defaultScreenOptions) as (keyof BottomTabNavigationOptions)[]
).forEach((key) => {
  if (defaultScreenOptions[key] === undefined) {
    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
    delete defaultScreenOptions[key];
  }
});

warnOnce(
  tabBarOptions,
  `Bottom Tab Navigator: 'tabBarOptions' is deprecated. Migrate the options to 
'screenOptions' instead.\n\nPlace the following in 'screenOptions' in your code to keep 
current behavior:\n\n${JSON.stringify(
    defaultScreenOptions,
    null,
    2
  )}\n\nSee https://reactnavigation.org/docs/bottom-tab-navigator#options for more 
details.`
);
}

if (typeof lazy === 'boolean') {
defaultScreenOptions.lazy = lazy;

warnOnce(
  true,
  `Bottom Tab Navigator: 'lazy' in props is deprecated. Move it to 'screenOptions' 
   instead.\n\nSee https://reactnavigation.org/docs/bottom-tab-navigator/#lazy for more 
  details.`
   );
  }

const { state, descriptors, navigation, NavigationContent } =
 useNavigationBuilder<
  TabNavigationState<ParamListBase>,
  TabRouterOptions,
  TabActionHelpers<ParamListBase>,
  BottomTabNavigationOptions,
  BottomTabNavigationEventMap
  >(TabRouter, {
  initialRouteName,
  backBehavior,
  children,
  screenListeners,
  screenOptions,
  defaultScreenOptions,
 });

 return (
  <NavigationContent>
  <BottomTabView
    {...rest}
    state={state}
    navigation={navigation}
    descriptors={descriptors}
    sceneContainerStyle={sceneContainerStyle}
  />
</NavigationContent>
);
}

export default createNavigatorFactory<
TabNavigationState<ParamListBase>,
BottomTabNavigationOptions,
BottomTabNavigationEventMap,
typeof BottomTabNavigator
>(BottomTabNavigator);

Answer 1

我发现让我的组件在底部选项卡的两条不同路线上呈现的唯一方法是使用 useNavigationState

从“@react-navigation/native”导入 { useNavigationState }

做了一个常数来检查路由名称，然后在使用效果上我们检查大小写...

  const screenName = useNavigationState((state) => 
  state.routes[state.index].name)
  
  const type = screenName


 useEffect(() => {

  switch (type) {
  case "Episodes": 
    setTitle("Episodes")
    setIsLoading(false)
    break
    case "quickGuides":
    setTitle("Quick Guides")

    setIsLoading(false)
    break
    }
  }, [])