如何在 React Navigation 5 中结合 StackNavigator 和 TabNavigator？

Question

首先感谢您阅读这个问题， 我是使用 react native 的新手， 现在就我而言：

我有 4 个屏幕将显示在选项卡导航器中：

• 首页
• 简介
• 阿蒂克尔
• 洛克人

我想在这个项目中添加 non tab navigator ( StackNavigator ) 屏幕以获取某些屏幕的详细信息：

• 个人资料详情
• 文章详情
• 洛克人详情

我正在尝试，当我注册此屏幕时，它将显示在选项卡导航器中，我不会在选项卡导航器中显示该详细信息屏幕。

我现在真的很困惑，stacknavigator 和 tabnavigator 怎么结合？

这是我的代码：

import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import TabBarIcon from '../components/TabBarIcon';

//screen tab
import HomeScreen from '../screens/HomeScreen';
import Artikel from '../screens/Artikel';
import Alumni from '../screens/Alumni';
import Loker from '../screens/Loker';

//non screen tab
import Profile from '../screens/Profile';

const Stack = createStackNavigator();

const BottomTab = createBottomTabNavigator();

const INITIAL_ROUTE_NAME = 'Home';

export default function BottomTabNavigator({ navigation, route }) {

  navigation.setOptions({ headerTitle: getHeaderTitle(route) , headerShown : false});

  return (

    <BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME} 
      tabBarOptions={{
        activeTintColor: '#58CB70'
      }}>
      <BottomTab.Screen
        name="Home"
        component={HomeScreen}

        options={{
          title: 'Home',
          tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="ios-home" />,
        }}
      />
      <BottomTab.Screen
        name="Artikel"
        component={Artikel}
        options={{
          title: 'Artikel',
          tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="ios-paper" />,
        }}
      />
      <BottomTab.Screen
        name="Loker"
        component={Loker}
        options={{
          title: 'Loker',
          tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="ios-briefcase" />,
        }}
      />
      <BottomTab.Screen
        name="Alumni"
        component={Alumni}
        options={{
          title: 'Alumni',
          tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="ios-people" />,
        }}
      />

    </BottomTab.Navigator>

  );
}


function getHeaderTitle(route) {
  const routeName = route.state?.routes[route.state.index]?.name ?? INITIAL_ROUTE_NAME;

  switch (routeName) {
    case 'Home':
      return 'How to get started';
    case 'Links':
      return 'Links to learn more';
  }
}

谢谢你

Answer 1

const HomescreenNavigator = () =>{
    return(<Stack.Navigator>
               <Stack.Screen component={ProfileDetail}/>
               <Stack.Screen component={ArtikelDetail}/>
           <Stack.Navigator />)

<BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME} 
          tabBarOptions={{
            activeTintColor: '#58CB70'
          }}>
          <BottomTab.Screen
            name="Home"
            component={HomeScreenNavigator} />

        </BottomTab.Navigator>

这是你的意思吗？您可以创建一个包含您的 Stack 的新 Stack“帮助器”组件，然后将该 Stack 组件传递给 BottomTab。

Answer 2

我不知道我是否在回答，但这里有我的代码。 我正在使用更可定制的 materialBottomTabs，但我认为如果和你的一样

function getHeaderTitle(route) {

  const routeName = route.state
    ? route.state.routes[route.state.index].name
    : route.params?.screen || 'The Home s App';

  switch (routeName) {
    case 'Favorites':
      return 'Favorites';
    case 'Info':
      return 'Info about the App';
  }
  return routeName;
}

只需将标题设置为switch

const Stack = createStackNavigator(); const Tab = createMaterialBottomTabNavigator();

const NavTab = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Favorites"
        component={FavoritesScreen}
        options={({route}) => ({
          tabBarLabel: 'Fav',
          tabBarIcon: () => IconFav(),
        })}
      />
      <Tab.Screen
        name="Info"
        component={InfoScreen}
        options={({route}) => ({
          tabBarLabel: 'Info',
          tabBarIcon: () => IconInfo(),
        })}
      />
    </Tab.Navigator>


<NavigationContainer>
 <Stack.Navigator>
    <Stack.Screen
      name="Home"
      component={NavTab}
      options={({route}) => ({
        headerTitle: getHeaderTitle(route),    
      })}
    />
    <Stack.Screen
      name="Detail"
      component={ItemDetailScreen}
    />
  </Stack.Navigator>
</NavigationContainer>;

要将屏幕的标题设置到堆栈中，只需添加到组件中：

  useEffect(() => {
    navigation.setOptions({
      headerTitle: 'Screen Title', // it can be a variable
    });
  }, []);