reactjs - 如何在 React Navigation 5 中组合 StackNavigator 和 TabNavigator？

Question

首先感谢您阅读这个问题，我是使用 native react 的新手，现在以我为例:

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

• 主页
• 简介
• 文章
• 洛克

我想向该项目添加非标签导航器 ( 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。