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结合

1 个答案: