React Native combine BottomTab with 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将嵌套在另一个选项卡中。并且还坚持一个导航容器。