如何将道具传递给嵌套在 screenStack 组件中的 bottomTabStack 组件

Question

我需要

Tab1

和

Tab2

来接受定义的参数

TabParamList

这样我就可以使用必要的数据正确渲染这些组件。我将如何创建界面

Tab1Props

和

Tab2Props

？

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

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

const Tab = createMaterialBottomTabNavigator();

interface Tab1Props {}

function Tab1({ navigation, route }: Tab1Props) {
  const { id } = route.params;
  return <>{id}</>;
}

interface Tab2Props {}

function Tab2({ navigation, route }: Tab2Props) {
  const { id } = route.params;
  return <>{id}</>;
}

export function TabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Tab1"
        component={Tab1}
        options={{
          tabBarLabel: "Tab1",
          tabBarIcon: ({ color }) => <SvgComponent object="Tab1" />,
        }}
      />
      <Tab.Screen
        name="Tab2"
        component={Tab2}
        options={{
          tabBarLabel: "Tab2",
          tabBarIcon: ({ color }) => <SvgComponent object="Tab2" />,
        }}
      />
    </Tab.Navigator>
  );
}

export type RootStackParamList = {
  TabNavigator: NavigatorScreenParams<TabParamList>;
};

const Stack = createStackNavigator<RootStackParamList>();

export default function AppStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="TabNavigator" component={TabNavigator} options={{ headerShown: false }} />
    </Stack.Navigator>
  );
}

Answer 1

更多细节在 Type checking with TypeScript

import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import React from "react";
import {
  ColorSchemeName,
  useColorScheme,
  View,
  Text,
  Button,
} from "react-native";

export default function Navigation({
  colorScheme,
}: {
  colorScheme: ColorSchemeName;
}) {
  return (
    <NavigationContainer>
      <RootNavigator />
    </NavigationContainer>
  );
}

/**
 * A root stack navigator is often used for displaying modals on top of all other content.
 * https://reactnavigation.org/docs/modal
 */
const Stack = createNativeStackNavigator<RootStackParamList>();

function RootNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Root"
        component={BottomTabNavigator}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
}

/**
 * A bottom tab navigator displays tab buttons on the bottom of the display to switch screens.
 * https://reactnavigation.org/docs/bottom-tab-navigator
 */
const BottomTab = createBottomTabNavigator<RootTabParamList>();

function BottomTabNavigator() {
  return (
    <BottomTab.Navigator initialRouteName="Tab1">
      <BottomTab.Screen
        name="Tab1"
        component={Tab1}
        initialParams={{ id: 0 }}
        options={({ navigation }: RootTabScreenProps<"Tab1">) => ({
          title: "Tab1",
        })}
      />
      <BottomTab.Screen
        name="Tab2"
        initialParams={{ id: 0 }}
        component={Tab2}
        options={{
          title: "Tab2",
        }}
      />
    </BottomTab.Navigator>
  );
}

import { BottomTabScreenProps } from "@react-navigation/bottom-tabs";
import {
  CompositeScreenProps,
  NavigatorScreenParams,
} from "@react-navigation/native";
import { NativeStackScreenProps } from "@react-navigation/native-stack";

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}


export type RootStackParamList = {
  Root: NavigatorScreenParams<RootTabParamList> | undefined;
};

export type RootStackScreenProps<Screen extends keyof RootStackParamList> =
  NativeStackScreenProps<RootStackParamList, Screen>;

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

export type RootTabScreenProps<Screen extends keyof RootTabParamList> =
  CompositeScreenProps<
    BottomTabScreenProps<RootTabParamList, Screen>,
    NativeStackScreenProps<RootStackParamList>
  >;
//screens
function Tab1({ navigation, route }: RootTabScreenProps<"Tab1">) {
  const idObjectPassed = route.params;

  return (
    <View>
      <Text>Tab 1 id from route is {idObjectPassed.id}</Text>
    </View>
  );
}
//screens
function Tab2({ navigation, route }: RootTabScreenProps<"Tab2">) {
  const idObjectToTab1 = { id: 2 };

  return (
    <View>
      <Text>Tab2</Text>
      <Button
        title="lets go to tab1"
        onPress={() => {
          navigation.navigate("Tab1", idObjectToTab1);
        }}
      />
    </View>
  );
}