Реагируйте на собственный NavigationDrawer - как я могу запустить предупреждение внутри createDrawerNavigation

Question

Я пытаюсь вызвать выход из системы (предупреждение для подтверждения) с помощью щелчка элемента в navDrawer, созданного с помощью реакции навигации.Знаете ли вы эффективный способ сделать это?

Это код в файле DrawerNavigator:

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

И при попытке вызвать последний элемент (Выход) я знаю, что мне нужновызвать класс, который выходит из класса Component, но вопрос, как следующий код, в этом случае, как вы можете видеть, я возвратил 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 без рендеринга экрана? Большое спасибо за вашу помощь

Answer 1

Я думаю, что вместо определения пустого экрана выхода из системы (который возвращает ноль), вы можете определить настраиваемый DrawerComponent, который может обрабатывать такие вещи, как подсказки Оповещения и Навигация на разных экранах.

Таким образом ваш 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>
  }
}

...

Надеюсь, это поможет.