在材料顶部选项卡中获取活动选项卡名称答案

【问题标题】：Get active Tab Name in material top tabs在材料顶部选项卡中获取活动选项卡名称
【发布时间】：2022-08-05 17:15:05
【问题描述】：

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>
  );
}

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

你找到解决这个问题的方法了吗？

标签： react-native tabs

【解决方案1】：

你已经解决了吗？

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

你的代码

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

更改此代码

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

通过这种方式，您可以在组件中将 'name' 和 'key' 作为 props 进行检查。

例子：

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

希望这对你有帮助！

【讨论】：