React Native中的隐式参数

Question

大家好，我对下面的代码有疑问。

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",
}}
>

使用参数路由.

我对下面的代码有疑问。特别是，我假设函数createScreenOptions使用参数路由，但我无法弄清楚它是如何传递给函数的。有人能解释路由参数是如何传递到createScreenOptions函数?

谢谢你。

Answer 1

这是将函数传递给props的常见模式。组件在运行时拥有您需要的信息;你想在运行时做一些依赖于这些信息的事情。你不可能提前知道这些信息!只有组件在运行时才知道。这就是为什么你给组件一个要运行的函数，然后组件用这个信息运行这个函数。

---

一个简单的例子是TextInput的onChangeTextprop。你想让文本输入在文本改变时做点什么。这个道具有这样的签名:

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

所以你会给它一个回调比如

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

假设在内部，文本输入将函数存储在一个名为onChangeText的变量中。文本输入知道它里面有什么文本以及它什么时候改变。每当它改变，它运行onChangeText(text)，你得到你的日志。

---

对于反应导航也是如此。它知道运行时在什么路由上。screenOptionsprop具有以下签名:

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

告诉我们你可以给它一个ScreenOptions类型的对象，或者一个从库中获取路由和导航的函数，返回一个ScreenOptions对象。

如果你给prop一个函数，就像你这样，理想情况下，它会在需要的时候运行该函数，并提供该函数所需的信息。