在 expo bottomtabs 中正确设置参数

Question

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

我没有在底部标签或任何参数 node_module 上看到初始参数属性...有人做过吗？本质上我们有两个底部选项卡的组件和不同的效果取决于该选项卡。

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

我们使用 TS 得到的错误是：

预期的类型来自属性 'initialParams' ，它在此处声明为类型 'IntrinsicAttributes & RouteConfig<RootTabParamList, "TabThree", TabNavigationState, BottomTabNavigationOptions, BottomTabNavigationEventMap>'

    <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
    }
  }, [])

在 expo bottomtabs 中正确设置参数

correctly set params in expo bottomtabs

react-native-navigation

expo

bottomtabs