如何给嵌套在ScreenStack的BottomTabStack传参并定义Tab组件Props接口

1. 给嵌套的BottomTabStack传递props #

方式一：通过导航参数传递（推荐） #

在Stack的Screen组件中，通过initialParams设置TabNavigator的初始参数，TabNavigator可通过自身的route.params接收：

// 修改AppStack中的Stack.Screen
<Stack.Screen 
  name="TabNavigator" 
  component={TabNavigator} 
  options={{ headerShown: false }}
  initialParams={{ someProp: '默认值' }} // 传递初始参数
/>

// 修改TabNavigator组件，接收route参数
export function TabNavigator({ route }: { route: RouteProp<RootStackParamList, 'TabNavigator'> }) {
  const { someProp } = route.params;
  // 在这里使用传递过来的参数
  return (
    <Tab.Navigator>
      {/* 原有Tab.Screen内容 */}
    </Tab.Navigator>
  );
}

如果是动态跳转时传递参数，调用navigation.navigate时直接传入：

navigation.navigate('TabNavigator', { someProp: '动态参数' });

方式二：直接传递自定义props #

将TabNavigator改为接受props的组件，在Stack.Screen中用children替代component传递实例：

// 修改TabNavigator组件
export function TabNavigator({ customProp }: { customProp: string }) {
  // 使用自定义props
  return (
    <Tab.Navigator>
      {/* 原有Tab.Screen内容 */}
    </Tab.Navigator>
  );
}

// 修改AppStack中的Stack.Screen
<Stack.Screen 
  name="TabNavigator" 
  options={{ headerShown: false }}
>
  {() => <TabNavigator customProp="直接传递的props" />}
</Stack.Screen>

2. 创建Tab1Props和Tab2Props接口以接收{id: number}参数 #

利用React Navigation提供的NavigationProp和RouteProp类型，结合已定义的TabParamList，可精准定义组件的props类型：

import { NavigationProp, RouteProp } from '@react-navigation/native';

// Tab1的Props类型
interface Tab1Props {
  navigation: NavigationProp<TabParamList, 'Tab1'>;
  route: RouteProp<TabParamList, 'Tab1'>;
}

// Tab2的Props类型
interface Tab2Props {
  navigation: NavigationProp<TabParamList, 'Tab2'>;
  route: RouteProp<TabParamList, 'Tab2'>;
}

修改后，TypeScript会自动推断route.params为{id: number}，既避免类型报错，也能获得正确的编辑器代码提示。

修改后的完整代码 #

import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
import { NavigationProp, NavigatorScreenParams, RouteProp } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

export type TabParamList = {
  Tab1: { id: number };
  Tab2: { id: number };
};

const Tab = createMaterialBottomTabNavigator();

// 定义Tab1的Props类型
interface Tab1Props {
  navigation: NavigationProp<TabParamList, 'Tab1'>;
  route: RouteProp<TabParamList, 'Tab1'>;
}

function Tab1({ navigation, route }: Tab1Props) {
  const { id } = route.params; // TypeScript自动推断id为number类型
  return <> {id} </>;
}

// 定义Tab2的Props类型
interface Tab2Props {
  navigation: NavigationProp<TabParamList, 'Tab2'>;
  route: RouteProp<TabParamList, 'Tab2'>;
}

function Tab2({ navigation, route }: Tab2Props) {
  const { id } = route.params; // TypeScript自动推断id为number类型
  return <> {id} </>;
}

// 修改TabNavigator以接收导航参数
export function TabNavigator({ route }: { route: RouteProp<RootStackParamList, 'TabNavigator'> }) {
  const { someProp } = route.params || {};
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Tab1"
        component={Tab1}
        initialParams={{ id: 1 }} // 给Tab1设置初始id
        options={{
          tabBarLabel: "Tab1",
          tabBarIcon: ({ color }) => <SvgComponent object="Tab1" />,
        }}
      />
      <Tab.Screen
        name="Tab2"
        component={Tab2}
        initialParams={{ id: 2 }} // 给Tab2设置初始id
        options={{
          tabBarLabel: "Tab2",
          tabBarIcon: ({ color }) => <SvgComponent object="Tab2" />,
        }}
      />
    </Tab.Navigator>
  );
}

export type RootStackParamList = {
  TabNavigator: NavigatorScreenParams<TabParamList> & { someProp?: string }; // 扩展参数类型
};

const Stack = createStackNavigator<RootStackParamList>();

export default function AppStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen 
        name="TabNavigator" 
        component={TabNavigator} 
        options={{ headerShown: false }}
        initialParams={{ someProp: '初始参数' }}
      />
    </Stack.Navigator>
  );
}

内容的提问来源于stack exchange，提问作者Noah Moore