React Native 结合 BottomTab 和 TopTab

Question

我正在尝试将顶部栏添加到我的应用程序，我已经有一个底部选项卡可以正常工作，但我发现添加顶部选项卡和底部选项卡很复杂。这是我的代码：

import { NavigationContainer, useNavigation  } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createBottomTabNavigator();
const TopTab = createMaterialTopTabNavigator();

const App = () => {
return (
<NavigationContainer>
  <Tab.Navigator >
    <Tab.Screen name="Post Room" component={PostANewRoomScreen} />
    <Tab.Screen name="Rooms" component={HomeScreen} />
  </Tab.Navigator>
</NavigationContainer>
 );
}

export const SecondComponent = ()  => {
return (
<NavigationContainer>
  <TopTab.Navigator>
      <TopTab.Screen name="Settings" component={SettingsScreen} />
  </TopTab.Navigator>
</NavigationContainer>
 );
}

export default App;

我认为当我将其更改为 SecondComponent 时导出可能有问题它只显示顶部栏，我尝试这样做 export default (App,SecondComponent) 但它也显示错误

Answer 1

根据您的评论，您应该执行以下操作

const Tab = createBottomTabNavigator();
const TopTab = createMaterialTopTabNavigator();

const BottomNavigator = () => {
return (
  <Tab.Navigator >
    <Tab.Screen name="Post Room" component={PostANewRoomScreen} />
    <Tab.Screen name="Rooms" component={HomeScreen} />
  </Tab.Navigator>
 );
}

export const App = ()  => {
return (
<NavigationContainer>
  <TopTab.Navigator>
      <TopTab.Screen name="Bottom" component={BottomNavigator} />
  </TopTab.Navigator>
</NavigationContainer>
 );
}

export default App;

这样，包含底部选项卡的 BottomNavigator 将嵌套在另一个内部。并坚持使用一个导航容器。

React Native 结合 BottomTab 和 TopTab

React Native combine BottomTab with TopTab

navigation

react-native

react-navigation