React Native NavigationDrawer - 如何在 createDrawerNavigation 中启动警报 [英] React Native NavigationDrawer - How can i launch an alert inside 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>
}
}
...
希望有帮助.
这篇关于React Native NavigationDrawer - 如何在 createDrawerNavigation 中启动警报的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!