[英]Logout using react Native DrawerNavigator
我正在构建一个 react-native 应用程序( App Image ),它在 Drawer Navigator 上有注销链接。
代码如下
const DrawerScreen = DrawerNavigator({
..........
logout: {
screen: Component
},
})
export default DrawerScreen;
但问题是,它只是加载组件屏幕。 我需要调用一个方法,我可以在其中执行 Asyncstorage clear 并导航到 LoginPage。
您可能想在抽屉中添加一个按钮。 如果是这样,您的代码将如下所示。
const Drawer = DrawerNavigator(
{
mainpage:{screen:MyScreen}
},
{
contentComponent:(props) => (
<View style={{flex:1}}>
<SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
<DrawerItems {...props} />
<Button title="Logout" onPress={DO_SOMETHING_HERE}/>
</SafeAreaView>
</View>
),
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
})
您应该import {DrawerItems} from 'react-navigation';
导入import {DrawerItems} from 'react-navigation';
让它工作。
更新:
const DrawerNavigation = createDrawerNavigator(
{
Mainpage: {
screen: Mainpage
}
},
{
contentComponent:(props) => (
<View style={{flex:1}}>
<SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
<DrawerItems {...props} />
<TouchableOpacity onPress={()=>
Alert.alert(
'Log out',
'Do you want to logout?',
[
{text: 'Cancel', onPress: () => {return null}},
{text: 'Confirm', onPress: () => {
AsyncStorage.clear();
props.navigation.navigate('Login')
}},
],
{ cancelable: false }
)
}>
<Text style={{margin: 16,fontWeight: 'bold',color: colors.textColor}}>Logout</Text>
</TouchableOpacity>
</SafeAreaView>
</View>
),
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
}
);
您可以使用 Component 类来执行 Asyncstorage 清除和导航登录页面。 如果你使用 react-navigation this.props 有导航对象。
class YourComponent extends Component {
constructor(props) {
super(props);
}
componentWillMount() {
Asyncstorage.clear();
this.props.navigation.navigate('LoginPage')
}
}
export default YourComponent;
import {StyleSheet,AsyncStorage,Alert, View,SafeAreaView, Text, ActivityIndicator, Dimensions, TextInput,Image, TouchableOpacity, TouchableHighlight} from 'react-native';
import {DrawerItems,DrawerActions} from 'react-navigation-drawer';
{
contentComponent:(props) => (
<View style={{flex:1}}>
<SideMenu {...props}/>
<DrawerItems {...props} />
<TouchableOpacity onPress={()=>
Alert.alert(
'Log out',
'Do you want to logout?',
[
{text: 'Cancel', onPress: () => {this.props.navigation.dispatch(DrawerActions.closeDrawer()) }},
{text: 'Confirm', onPress: () => {
AsyncStorage.clear();
props.navigation.navigate('LoginScreen')
}},
],
{ cancelable: false }
)
}>
<Text style={{margin: 16,fontWeight: 'bold',color: 'red'}}>Logout</Text>
</TouchableOpacity>
</View>
),
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
},
您可以创建一个模态来为您执行此操作。 单击注销-> 使用可见属性显示模态,然后单击是,然后关闭模态-> 导航到登录屏幕。
只需使用 AlertView 兄弟,这将有所帮助,但在上面的示例中,如果您有一个比这个标题 (this.props.navigation.navigate('LoginPage'))
不会有任何意义
您的视图将加载到标题下方
如果您正在导航版本 5 和功能组件中寻找答案:
const getActiveRouteState = function (
routes: Route<string>[],
index: number,
name: string
) {
return routes[index].name.toLowerCase().indexOf(name.toLowerCase()) >= 0;
};
function CustomDrawerContent(
props: DrawerContentComponentProps<DrawerContentOptions>
) {
return (
<View style={{ flex: 1 }}>
<DrawerContentScrollView {...props}>
<View>
<DrawerItem
icon={({ color, size }) => <Icon type='AntDesign' name='home' />}
label='Home'
focused={getActiveRouteState(
props.state.routes,
props.state.index,
'Home'
)}
onPress={() => {
props.navigation.navigate('Home');
}}
/>
<DrawerItem
icon={({ color, size }) => (
<Icon type='AntDesign' name='minuscircle' />
)}
label='Test'
focused={getActiveRouteState(
props.state.routes,
props.state.index,
'Test'
)}
onPress={() => {
props.navigation.navigate('Test');
}}
/>
<DrawerItem
icon={({ color, size }) => (
<Icon type='AntDesign' name='logout' />
)}
label='LogOut'
onPress={async () => {
await logoutUser();
setLogginState(false);
}}
/>
</View>
</DrawerContentScrollView>
</View>
);
}
const AppDrawer = createDrawerNavigator();
const AppDrawerScreen = () => (
<AppDrawer.Navigator
drawerPosition='left'
drawerContent={(props) => <CustomDrawerContent {...props} />}
>
<AppDrawer.Screen
name='Home'
component={HomeScreen}
options={{ drawerLabel: 'Home' }}
/>
<AppDrawer.Screen name='Test' component={TestScreen} />
</AppDrawer.Navigator>
);
如果您想隐藏抽屉中的选项,这也将为您提供帮助。
这是一种使用 react-navigation 库在抽屉中实现注销的方法。
<Drawer.Screen
name="Logout"
component={<Any Dummy Component>}
listeners={({ navigation }) => ({
state: (e) => {
if (e.data.state.index === 3) {
// 3 is index of logout item in drawer
navigation.replace("Login")
}
}
})}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.