React Native中createScreenOptions的route参数传递问询

我有一个关于React Native代码的疑问，以下是我的代码：

import { StatusBar as ExpoStatusBar } from "expo-status-bar";
import React from "react";
import { ThemeProvider } from "styled-components/native";
import { Text } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import {
  useFonts as useOswald,
  Oswald_400Regular,
} from "@expo-google-fonts/oswald";
import { useFonts as useLato, Lato_400Regular } from "@expo-google-fonts/lato";
import { theme } from "./src/infrastructure/theme";
import { RestaurantsScreen } from "./src/features/restaurants/screen/restaurants.screen";
import { SafeArea } from "./src/components/utility/safe-area.component";
import { RestaurantsContextProvider } from "./src/services/restaurants/restaurants.context";
const Tab = createBottomTabNavigator();

const TAB_ICON = {
  Restaurants: "md-restaurant",
  Map: "md-map",
  Settings: "md-settings",
};
const createScreenOptions = ({ route }) => {
  const iconName = TAB_ICON[route.name];
  return {
    tabBarIcon: ({ size, color }) => (
      <Ionicons name={iconName} size={size} color={color} />
    ),
  };
};
const Settings = () => (
  <SafeArea>
    <Text>Settings</Text>
  </SafeArea>
);
const Map = () => (
  <SafeArea>
    <Text>Map</Text>
  </SafeArea>
);

export default function App() {
  const [oswaldLoaded] = useOswald({
    Oswald_400Regular,
  });

  const [latoLoaded] = useLato({
    Lato_400Regular,
  });

  if (!oswaldLoaded || !latoLoaded) {
    return null;
  }
  return (
    <>
      <ThemeProvider theme={theme}>
        <RestaurantsContextProvider>
          <NavigationContainer>
            <Tab.Navigator
              screenOptions={createScreenOptions}
              tabBarOptions={{
                activeTintColor: "tomato",
                inactiveTintColor: "gray",
              }}
            >
              <Tab.Screen name="Restaurants" component={RestaurantsScreen} />
              <Tab.Screen name="Map" component={Map} />
              <Tab.Screen name="Settings" component={Settings} />
            </Tab.Navigator>
          </NavigationContainer>
        </RestaurantsContextProvider>
      </ThemeProvider>
      <ExpoStatusBar style="auto" />
    </>
  );
}

其中我定义了createScreenOptions函数：

const createScreenOptions = ({ route }) => {
  const iconName = TAB_ICON[route.name];
  return {
    tabBarIcon: ({ size, color }) => (
      <Ionicons name={iconName} size={size} color={color} />
    ),
  };
};

并将其传入Tab.Navigator的screenOptions属性中：

<Tab.Navigator
  screenOptions={createScreenOptions}
  tabBarOptions={{
    activeTintColor: "tomato",
    inactiveTintColor: "gray",
  }}
>

我知道该函数使用了route参数，但不清楚这个route参数是如何被传递到createScreenOptions函数中的，能否有人帮忙解释一下？

解释： #

这是React Navigation框架内部自动处理的参数传递，具体逻辑如下：

• 当你将函数类型的值传给Tab.Navigator的screenOptions属性时，框架在渲染每个Tab.Screen对应的标签页组件时，会自动收集当前路由的元数据（包括路由名称、自定义参数等），封装成一个route对象。
• 框架会把这个route对象作为参数，调用你定义的createScreenOptions函数。你在函数中解构出的route参数，就是框架自动传递过来的当前路由信息。
• 对于每个Tab.Screen，Tab.Navigator都会单独执行一次createScreenOptions，每次执行时传入的route对象都对应当前标签页的路由信息。比如渲染name="Restaurants"的标签页时，route.name就是"Restaurants"，你就能通过它匹配TAB_ICON里对应的图标名称，生成专属的底部标签图标配置。

内容的提问来源于stack exchange，提问作者Lorenzo Ferretti