React native React Native NavigationDrawer-如何在createDrawerNavigation内启动警报

我正在尝试从使用reactnavigation制作的navDrawer中单击的项目触发注销（需要确认的警报）。你知道一个有效的方法吗

这是DroperNavigator文件中的代码：

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

当试图调用最后一个元素（注销）时，我知道我需要调用一个从Component类扩展而来的类，但问题与下一个代码类似，在这种情况下，您可以看到我在render方法中返回null，它会完全清除屏幕，但当尝试单击警报按钮时，它不会给我任何信息

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的警报？非常感谢您的帮助

我想不是定义一个空的注销屏幕（返回null）您可以定义一个定制的

抽屉组件

，它可以处理诸如提示警报和导航到不同屏幕之类的事情

这样，您的

DrawerNavigator

看起来与此类似-

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

-

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>
  }
}

类抽屉组件扩展React.Component{
导航到=（路由名称）=>{
this.props.navigation.navigate（routeName）
}
注销=（）=>{
//const deleted_element=clearAllData（）；
log（'Logout.js-Element deleted'）；
}
取消注销=（）=>{
log（'注销过程现在被取消'）；
}
logoutAlert=（）=>{
警惕，警惕(
“确认”，
“您确定要注销吗？”，
[
{text:'Yes'，onPress:（）=>this.logout}，
{text:'Cancel'，onPress:（）=>this.canceledLogout}
]
);
}
render（）{
this.navigateTo（'Home'）}>Home
this.navigateTo（'Dashboard'）}>Dashboard
注销
}
}

希望能有帮助