在材质顶部选项卡中获取活动选项卡名称

Question

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
const Tab = createMaterialTopTabNavigator();
function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      screenOptions={{
        tabBarActiveTintColor: '#e91e63',
        tabBarLabelStyle: { fontSize: 12 },
        tabBarStyle: { backgroundColor: 'powderblue' },
      }}
    >
      <Tab.Screen
        name="Feed"
        component={Feed}
        options={{ tabBarLabel: 'Home' }}
      />
      <Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{ tabBarLabel: 'Updates' }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{ tabBarLabel: 'Profile' }}
      />
    </Tab.Navigator>
  );
}

我正在使用上面的代码。我正在尝试获取活动选项卡索引和名称。所以我可以做一些条件基础的工作。但无法获取选项卡索引和名称，因此这里有任何帮助。

Answer 1

嗨~你已经解决了吗？

您只需要对代码进行一些修改。

您的代码

<Tab.Screen
  name="Feed"
  component={Feed}
  options={{ tabBarLabel: 'Home' }}
/>

更改为该代码

<Tab.Screen
  name="Feed"  
  options={{ tabBarLabel: 'Home' }}
>
 {props => <Feed {...props} />}
</Tab.Screen>

通过这种方式，您可以在组件中检查"name"one_answers"key"作为道具。

示例：

route:
 name: "Feed"
 key: "Feed-your key code"
 params: undefined
 Symbol(CHILD_STATE): undefined
 __proto__: Object
 __proto__: Object

希望这对你有帮助！