React Native中的隐式参数

v09wglhw  于 2023-01-31  发布在  React
关注(0)|答案(1)|浏览(128)

大家好,我有一个关于以下代码的疑问.

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={createScreenOptions}
              tabBarOptions={{
                activeTintColor: "tomato",
                inactiveTintColor: "gray",
              }}
            >

使用参数route
我对下面的代码有疑问。特别是,我假设函数createScreenOptions使用了参数route,但我无法弄清楚它是如何传递给函数的。谁能解释一下route参数是如何传递给createScreenOptions函数的?
太感谢你了。

bihw5rsg

bihw5rsg1#

这是一种常见的模式,函数传递给props,组件在运行时有你需要的信息;你想在运行时做一些依赖于这些信息的事情。你不可能提前知道这些信息!在运行时,只有组件知道这些信息。这就是为什么你给予组件一个要运行的函数,然后组件用这些信息运行函数。
一个简单的例子是TextInput的onChangeText prop,当文本发生变化时,文本输入会执行一些操作,prop具有以下签名:

onChangeText?: ((text: string) => void)

所以你应该给予它一个回调

<TextInput
    onChangeText={(text) => console.log(text)}

假设在内部,文本输入将函数存储在一个名为onChangeText的变量中,文本输入知道它里面有什么文本,什么时候改变,只要它改变了,它就会运行onChangeText(text),你就可以得到日志。
对于react-navigation也是如此,它在运行时知道自己在哪条路线上,screenOptions prop有这样的签名:

screenOptions?: ScreenOptions | ((props: {
        route: RouteProp<ParamList>;
        navigation: any;
    }) => ScreenOptions)

这告诉我们你可以给予它一个ScreenOptions类型的对象,或者一个函数,从库中获取路径和导航,并返回ScreenOptions对象。
如果你给予prop一个函数,就像你所做的那样,理想情况下,它会在需要的时候运行这个函数,并提供这个函数所需要的信息。

相关问题