javascript - 带有标题后退按钮的反应导航抽屉导航器
问题描述
我正在使用 React Navigation v5 中的抽屉式导航。在我的根文件中,我创建了抽屉导航器。此导航器内的某些屏幕具有嵌套的堆栈导航器。第一项是仪表板,第二项是关系。
问题是当我去关系时,我没有返回到第一个屏幕(仪表板)的后退按钮。是否可以将其添加到我的关系屏幕?
根代码:
<NavigationContainer>
<DrawerNavigator.Navigator
drawerContent={(props) => (
<SidebarComponent {...props} user={this.props.device.user} />
)}
drawerPosition="right"
drawerStyle={{width: '90%', padding: 0, backgroundColor: 'red'}}>
{this.props.authenticated && this.props.device.api_key ? (
<>
<DrawerNavigator.Screen
name="Home"
options={{
headerShown: false,
icon: 'tachometer-alt',
category: 'dashboard',
}}
component={DashboardStack}
/>
<DrawerNavigator.Screen
name="Relations"
options={{
icon: 'address-book',
category: 'dashboard',
}}
component={RelationsStack}
/>
</>
) : (
<>
<DrawerNavigator.Screen
name="login"
options={{headerShown: false, gestureEnabled: false}}
component={LoginStack}
/>
</>
)}
</DrawerNavigator.Navigator>
</NavigationContainer>
关系栈代码:
import 'react-native-gesture-handler';
import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import RelationsListScreen from '../RelationsListScreen';
import {colors} from '../../../assets/styles/variables';
const Stack = createStackNavigator();
function RelationsStack() {
return (
<Stack.Navigator>
<Stack.Screen
options={{
headerShown: true,
headerTintColor: '#FFF',
headerStyle: {
backgroundColor: colors.primary,
shadowColor: 'transparent',
},
}}
name="Relations"
component={RelationsListScreen}
/>
</Stack.Navigator>
);
}
export default RelationsStack;
解决方案
您可以创建一个堆栈导航器,它是您的抽屉导航器的屏幕(当用户通过身份验证时),它具有Home
和Relations
作为屏幕。我AuthenticatedNavigator
在下面的示例中调用了这个导航器:
const AuthenticatedStack = createStackNavigator();
// ...
const AuthenticatedNavigator = () => {
return (
<AuthenticatedStack.Navigator screenOptions={{headerShown: false}}>
<AuthenticatedStack.Screen
name="Home"
options={{
icon: 'tachometer-alt',
category: 'dashboard',
}}
component={DashboardStack}
/>
<AuthenticatedStack.Screen
name="Relations"
options={{
icon: 'address-book',
category: 'dashboard',
}}
component={RelationsStack}
/>
</AuthenticatedStack.Navigator>
);
};
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView {...props}>
<DrawerItem
label="Home"
onPress={() => props.navigation.navigate('Home')}
/>
<DrawerItem
label="Relations"
onPress={() => props.navigation.navigate('Relations')}
/>
</DrawerContentScrollView>
);
}
function App() {
const authenticated = true;
return (
<NavigationContainer>
<DrawerNavigator.Navigator
drawerPosition="right"
drawerStyle={{width: '90%', padding: 0, backgroundColor: 'red'}}
drawerContent={(props) => <CustomDrawerContent {...props} />}>
{authenticated ? (
<DrawerNavigator.Screen
name="authenticated"
component={AuthenticatedNavigator}
/>
) : (
<DrawerNavigator.Screen
name="login"
options={{headerShown: false, gestureEnabled: false}}
component={LoginStack}
/>
)}
</DrawerNavigator.Navigator>
</NavigationContainer>
);
}
我还使用了自定义抽屉内容组件,因此在使用创建另一个堆栈导航器的方法后,抽屉中的链接仍然可以正常工作。您可以在此处的文档中阅读有关提供自定义抽屉组件的更多信息:https ://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent 。
我遗漏了一些代码并制作authenticated
了硬编码值以简化示例。也一定要导入DrawerItem
, DrawerContentScrollView
from@react-navigation/drawer
。
推荐阅读
- c - 如何将 Gstreamer RTSP 连接到 iPhone?
- python - 如何在 QTableWidget 中有垂直网格线?
- html - 如何在标签块 libxml2 中获取文本?
- ansible - Ansible playbook 输出角色变量和有关您的操作系统的信息
- configuration - 是否可以将 Jackson ObjectMapper 配置为始终使用 @JsonIdentityInfo
- windows - 为什么我的 USB 设备有时会在 windows (7&10) 注册表中创建另一个条目?
- python - 如何连接numpy数组?
- c# - 如何通过 c# 代码以纯文本形式获取 IE 设置?
- nginx - Nginx 代理通行证……什么都没有?
- android - 如何识别与 Genymotion 兼容的 Google Play 应用程序?