React Native BottomTabNavigator中Tab.Screen传参失败求助

问题说明 #

使用React Native的BottomTabNavigator时，尝试给Tab.Screen对应的VisitsTab组件传递props，但VisitsTab中始终无法获取到props，打印结果为undefined。已确认外层的MainScreen组件中有可用的props，先后尝试了两种传递方式均无效。

尝试过的代码示例 #

无props的基础写法 #

<Tab.Screen
  name='Visits'
  component={VisitsTab}
  options={{
    tabBarLabel: 'Visits',
    tabBarIcon: ({ color, size }) => <FontAwesome name='street-view' color={color} size={size} />,
  }}
/> 

第一种尝试：将component设为返回组件的函数 #

<Tab.Screen
  name='Visits'
  component={(props) => <VisitsTab {...props} />}
  options={{
    tabBarLabel: 'Visits',
    tabBarIcon: ({ color, size }) => <FontAwesome name='street-view' color={color} size={size} />,
  }}
/>

第二种尝试：使用Tab.Screen的子元素形式 #

<Tab.Screen
  name='Visits'
  options={{
    tabBarLabel: 'Visits',
    tabBarIcon: ({ color, size }) => <FontAwesome name='street-view' color={color} size={size} />,
  }}
>
  {(props) => <VisitsTab {...props} />}
</Tab.Screen>

完整导航组件代码 #

import { VisitsTab } from './tabs/VisitsTab';
import { ChartTab } from './tabs/ChartTab';
import { GoalsTab } from './tabs/GoalsTab';

export const MainScreen = (props) => {
  const Tab = createBottomTabNavigator();
  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: true,
        title: 'Patient',
        headerLeft: () => (
          <Feather
            name='chevron-left'
            size={24}
            onPress={() => props.navigation.goBack()}
          />
        ),
      }}
      initialRouteName={'Visits'}
    >
      <Tab.Screen
        name='Visits'
        component={(props) => <VisitsTab {...props} />}
        options={{
          tabBarLabel: 'Visits',
          tabBarIcon: ({ color, size }) => <FontAwesome name='street-view' color={color} size={size} />,
        }}
      />
      <Tab.Screen
        name='Chart'
        component={ChartTab}
        options={{
          tabBarLabel: 'Charts',
          tabBarIcon: ({ color, size }) => <FontAwesome name='id-badge' color={color} size={size} />,
        }}
      />
      <Tab.Screen
        name='Goals'
        component={GoalsTab}
        options={{
          tabBarLabel: 'Edit Goals',
          tabBarIcon: ({ color, size }) => <FontAwesome name='trophy' color={color} size={size} />,
        }}
      />
    </Tab.Navigator>
  );
};

疑问 #

BottomTabNavigator的官方文档中没有提及如何向子屏幕传递props，请问我的操作哪里出现了错误？

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