在 React Native 中使用底部导航时如何跟踪屏幕标题？

Question

我在 React Native 中使用底部导航，我有一个 header 应该显示我目前在哪个屏幕上。我不确定如何在 Tab Bar 按下时更改该文本。我尝试使用 onPress 事件，但似乎不起作用。

这是我的代码：

    <View style={styles.container}>

      <StatusBar barStyle="light-content" />
        <View style={styles.header}>
            <Text style={styles.headerText}>{headerText}</Text>
            <SettingsIcon />
        </View>

    <View style={styles.main}>

    <NavigationContainer >
     <Tab.Navigator initialRouteName="Home" tabBarOptions={{
           activeTintColor: '#FF9F0A',
           inactiveTintColor:'white',
           style: {
              backgroundColor: '#000000',//color you want to change
           }
         }}>
       <Tab.Screen name="Home" component={Home}  options={{
             tabBarLabel: 'HOME',
             tabBarIcon: ({ color, size }) => (
               <HomeTabIcon name="home" color={color} size={size} />
             ),
           }}/>
       <Tab.Screen name="Controls" component={Controls} options={{
             tabBarLabel: 'CONTROLS',
             tabBarIcon: ({ color, size }) => (
               <ControlsTabIcon name="controls" color={color} size={size} />
             ),
           }}/>
       <Tab.Screen   name="Charging" component={Charging} options={{
             tabBarLabel: 'CHARGING',
             tabBarIcon: ({ color, size }) => (
               <ChargingTabIcon name="charging"  color={color} size={size} />
             ),
           }}/>
   </Tab.Navigator>
   </NavigationContainer>
    </View>
    
  </View>

Answer 1

您可以将选项卡导航器嵌套在屏幕导航器中。

您可以根据活动屏幕的名称更改屏幕导航器的标题 header。

有关详细信息，请阅读 this。

import React from 'react';

import { NavigationContainer, getFocusedRouteNameFromRoute } from '@react-navigation/native';

import { createStackNavigator } from '@react-navigation/stack';

const RootStack = createStackNavigator();

const Tab = createBottomTabNavigator();

function getHeaderTitle(route : any) {
  // If the focused route is not found, we need to assume it's the initial screen
  // This can happen during if there hasn't been any navigation inside the screen
  // In our case, it's "Feed" as that's the first screen inside the navigator
  const routeName = getFocusedRouteNameFromRoute(route) ?? 'Home';

  console.log("name route = ", routeName);

  switch (routeName) {
    case 'Home':
      return 'name header tab1';
    case 'tab1':
      return 'name header tab1';
    case 'tab2':
      return 'name header tab2';
  }
}

const HomeTabs = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="tab1" component={Component1} />
      <Tab.Screen name="tab2" component={Component2} />
    </Tab.Navigator>
  );
};

function Root() {
  return (
    <NavigationContainer>
      <RootStack.Navigator>
        <RootStack.Screen 
          name="Home"
          component={HomeTabs}
          options={({ route }) => ({
            headerTitle: getHeaderTitle(route),
          })}
           />
      </RootStack.Navigator>
    </NavigationContainer>
  );
};

在 React Native 中使用底部导航时如何跟踪屏幕标题？

How to keep track of screen title when bottom navigation is used in react native?

react-native

react-navigation-bottom-tab