抽屉导航在选项卡导航内，但在顶部(本机反应)

Question

我正在编写一个类似于Instagram的反应原生应用程序。我已经有一个包含 5 个项目的底部选项卡导航器，最后一个是配置文件选项卡。

在此配置文件选项卡中，我想要一个抽屉导航器来管理配置文件设置，我希望此抽屉仅在此选项卡中"可绘制"，而不是其他选项卡。但我也希望抽屉同时显示在选项卡导航器的顶部(就像 Instagram 一样(。

我为此使用了反应导航库。我的问题是：这可能吗？如果是，我如何在我的代码上实现它？

谢谢

Answer 1

您可以将底部选项卡导航器包装在抽屉导航器内。
这样，抽屉将始终显示在底部标签的顶部。
任何从任何底部选项卡页面打开抽屉的尝试都会冒泡到抽屉导航器，并最终导致抽屉被打开。

const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
function BottomTabsNavigator() {
return (
<Tab.Navigator>
<Tab.Screen
name="tab1"
component={Component1}
/>
<Tab.Screen
name="tab2"
component={Component2}
/>
<Tab.Screen
name="tab3"
component={Component3}
/>
</Tab.Navigator>
)
}

function MainNavigator() {
return (
<Drawer.Navigaton>
<Drawer.Screen name="drawer" component={BottomTabsNavigator} />
</Drawer.Navigator>
)
}
export default function App() {
return (
<NavigationContainer>
<MainNavigator/>
</NavigationContainer>
)
}

当然，您可以实现自定义抽屉组件并将其替换为默认抽屉(使用drawerContent道具(以显示您想要的任何项目。

Answer 2

您必须在选项卡导航器中嵌套一个抽屉导航器。

配置文件选项卡应包含抽屉导航器，并应包含实际的配置文件屏幕。

如果要将抽屉自定义到通知页面，则应在此处提供自定义视图。

高级结构如下

const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
function AppDraw() {
return (
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
);
}
function HomeScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={AppDraw} />
</Tab.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}

您可以参考此来自定义抽屉。 希望对您有所帮助。