react-native - 如何找到 React Navigation TabBarIcon/TabBar 元素中使用的“renderIcon”函数的规范？

Question

使用了此功能，但我找不到它的定义位置。我还看到很多使用此代码的教程 - 所以我不确定人们如何理解它是如何使用的。

我从源代码中提取了这个：

 20 export default function TabBarIcon({
 21   activeOpacity,
 22   inactiveOpacity,
 23   activeTintColor,
 24   inactiveTintColor,
 25   renderIcon,    <----  HERE IT IS BEING USED IN THE REACT NAVIGATION SOURCE CODE
 26   size,
 27   style,
 28 }: Props) {
 29   // We render the icon twice at the same position on top of each other:
 30   // active and inactive one, so we can fade between them.
 31   return (
 32     <View style={style}>
 33       <View style={[styles.icon, { opacity: activeOpacity }]}>
 34         {renderIcon({
 35           focused: true,
 36           size,
 37           color: activeTintColor,
 38         })}
 39       </View>
 40       <View style={[styles.icon, { opacity: inactiveOpacity }]}>
 41         {renderIcon({
 42           focused: false,
 43           size,
 44           color: inactiveTintColor,
 45         })}
 46       </View>
 47     </View>
 48   );
 49 }

找不到这种方法的来源，只有它被使用过。文档中的任何地方都没有提到这种方法 - 我可以找到。

我错过了什么？

标签： react-nativereact-navigationreact-native-navigationreact-navigation-bottom-tab

Answer 1

您可以使用导航操作来实现相同的行为。我写了一篇简短的博客，解释了为什么我们不能只使用升级指南中提到的条件模板

https://omidborjian.medium.com/switch-navigator-in-react-navigation-5-1d2bf34775b9

import { CommonActions } from '@react-navigation/native';

       navigation.dispatch(

            CommonActions.reset({
              index: 1,
              routes: [
                { name: routeName, params: params }
              ],
            })
          );