React Native NavigationDrawer

本文介绍了React Native NavigationDrawer - 如何在 createDrawerNavigation 中启动警报的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试从使用 reactnavigation 制作的 navDrawer 中的项目单击触发注销(确认警报).您知道一种有效的方法吗?

i am trying to trigger a logout (an alert to confirm) from an item click in a navDrawer made with reactnavigation. Do you know an efficient way to do that?

这是 DrawerNavigator 文件中的代码:

This is the code in the DrawerNavigator file:

export default createDrawerNavigator({ Home: { screen: Home }, Dashboard: { screen: Dashboard }, Logout: { screen: Logout } } ...

当尝试调用最后一个元素 (Logout) 时，我知道我需要调用一个从 Component 类扩展的类，但问题类似于下一个代码，在这种情况下，您可以看到我在渲染方法中返回了 null，它完全清除了屏幕，但是当尝试单击警报按钮时，它没有给我任何东西

And when trying to call the last element (Logout) i know i need to call a class which extends from Component class, but the question like the next code, in this case as you can see i returned null in the render method, it clears completely the screen, but when trying to click into an alert button it does not give me anything

import React, {Component} from 'react'; import { Alert } from 'react-native'; class Logout extends Component{ constructor(props){ console.log('those are the props '+JSON.stringify(props)) super(props); this.logoutAlert(); } logout = ()=>{ //const deleted_element = clearAllData(); console.log('Logout.js - Element deleted '); } canceledLogout = () => { console.log('The logout process is now cancelled'); } logoutAlert() { Alert.alert( 'Confirm', 'Are you sure that you want to logout?', [ { text: 'Yes', onPress: () => this.logout }, { text: 'Cancel', onPress: () => this.canceledLogout } ] ); } render(){ return null; } } export default Logout;

那么之后的问题是:有没有办法做到(在不渲染屏幕的情况下通过单击 navDrawerItem 显示警报?非常感谢您的帮助

So after that the question is: Is there a way to make it (display an alert from clicking a navDrawerItem without rendering a screen? Thank you very much for your help

推荐答案

我认为您可以定义一个自定义的 DrawerComponent 来处理诸如提示之类的事情，而不是定义一个空的注销屏幕(返回 null)警报和导航到不同的屏幕.

I think instead of defining an empty Logout Screen (that returns null) you can define a customised DrawerComponent that can handle things like prompting Alerts and Navigation to different screens.

这样做后，您的 DrawerNavigator 将与此类似 -

By doing so your DrawerNavigator would look something similar to this -

export const DrawerNavigator = createDrawerNavigator({ Home: { screen: Home }, Dashboard: { screen: Dashboard }, ...More Screens }, { drawerOpenRoute: 'DrawerOpen', drawerCloseRoute: 'DrawerClose', drawerToggleRoute: 'DrawerToggle', drawerWidth: 250, useNativeAnimations: true, contentComponent: DrawerComponent })

你可以像这样创建你的 DrawerComponent -

And you can create your DrawerComponent like this -

class DrawerComponent extends React.Component { navigateTo = (routeName) => { this.props.navigation.navigate(routeName) } logout = ()=>{ //const deleted_element = clearAllData(); console.log('Logout.js - Element deleted '); } canceledLogout = () => { console.log('The logout process is now cancelled'); } logoutAlert = () => { Alert.alert( 'Confirm', 'Are you sure that you want to logout?', [ { text: 'Yes', onPress: () => this.logout }, { text: 'Cancel', onPress: () => this.canceledLogout } ] ); } render() { <ScrollView> <TouchableOpacity onPress={() => this.navigateTo('Home')}> Home </TouchableOpacity> <TouchableOpacity onPress={() => this.navigateTo('Dashboard')}> Dashboard </TouchableOpacity> <TouchableOpacity onPress={this.logoutAlert}> Logout </TouchableOpacity> </ScrollView> } }

...

希望有帮助.