如何在底部选项卡中获取导航和状态

Question

我正在使用react native bottom navigation 6。我想获取导航和状态，但它返回未定义。

export default function Navigation() {
  return (
    <NavigationContainer linking={LinkingConfiguration}>
      <RootNavigator />
    </NavigationContainer>
  );
}


const Stack = createNativeStackNavigator<RootStackParamList>();

function RootNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
      <Stack.Screen name="Root" component={BottomTabBar} options={{ headerShown: false }} />
    </Stack.Navigator>
  );
}

/**
 * A bottom tab navigator displays tab buttons on the bottom of the display to switch screens.
 * https://reactnavigation.org/docs/bottom-tab-navigator
 */

这里返回 null ({ navigation, state,descriptors }: BottomTabBarProp) 我想使用 state.index 来获取当前选项卡并显示不同的图标/svg。我的替代方法是使用专注。

const BottomTab = createBottomTabNavigator<RootTabParamList>();

const BottomTabBar = ({ navigation, state,descriptors }: BottomTabBarProps) => (
  <>
  <BottomTab.Navigator 
  initialRouteName="Feed"
  screenOptions={{
    tabBarShowLabel: false,
    tabBarActiveTintColor: Colors.activeNavIcon,
    tabBarInactiveTintColor: Colors.inactiveNavIcon
  }}
>
  <BottomTab.Screen
    name="Feed"
    component={FeedNavigator}
    options={{
      tabBarIcon: ({ color, size, focused }) => (
        focused ?
          <HomeActive width={size} height={size} color={color} />
          : <Home width={size} height={size} color={color} />
      ),
    }}
  />

 
  <BottomTab.Screen
    name="Profile"
    component={ProfileNavigator}
    options={{
      tabBarIcon: ({ color, size, focused  }) => (
        focused ?
        <ProfileActive width={size} height={size} color={color} />
        : <Profile width={size} height={size} color={color} />
      ),
    }}
  />
</BottomTab.Navigator>
  </>
);

Answer 1

当您使用功能组件时。我推荐使用react-navigation提供的Hooks。

使用导航

Link to Docs

useNavigationState

Link to Docs

const BottomTabBar = () => {

   const navigation = useNavigation()
  
   return (
     <>
     <BottomTab.Navigator 
       initialRouteName="Feed"
       screenOptions={{
         tabBarShowLabel: false,
         tabBarActiveTintColor: Colors.activeNavIcon,
         tabBarInactiveTintColor: Colors.inactiveNavIcon
       }}
     />
  ...............
  ...............
  ..............
>
  )
}