[英]Expo React Native Drawer Navigator Logout functionality
StackOverflow 我對原生反應很陌生,因為我現在實現了抽屜導航. 這是我的抽屜代碼,我在谷歌的幾個小時內找到它,它工作正常,但它具有屏幕功能如果此代碼不正確,我找不到如何在此代碼中創建注銷鏈接的任何選項,然后建議任何其他好的片段提前致謝
import React from 'react'; import { Ionicons } from '@expo/vector-icons' import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'; import { createDrawerNavigator, createStackNavigator, createAppContainer } from 'react-navigation'; import { DrawerActions } from 'react-navigation-drawer'; // _signOutAsync = async () => { // await AsyncStorage.clear(); // this.props.navigation.navigate('Auth'); // }; const HomeScreen = () => ( <View style={styles.container}> <Text>Home Screen!</Text> </View> ); const ProfileScreen = () => ( <View style={styles.container}> <Text>Profile Screen!</Text> </View> ); const SettingsScreen = () => ( <View style={styles.container}> <Text>Settings Screen!</Text> </View> ); const DrawerNavigator = createDrawerNavigator({ Home: { screen: HomeScreen, navigationOptions: ({ navigation }) => ({ title: 'Home Screen', drawerLabel: 'Home', drawerIcon: () => ( <Ionicons name="ios-home" size={20} /> ) }) }, Profile: { screen: ProfileScreen, navigationOptions: ({ navigation }) => ({ title: 'Profile Screen', drawerLabel: 'Profile', drawerIcon: () => ( <Ionicons name="ios-person" size={20} /> ) }) }, Settings: { screen: SettingsScreen, navigationOptions: ({ navigation }) => ({ drawerIcon: () => ( <Ionicons name="ios-settings" size={20} /> ) }) }, }); const StackNavigator = createStackNavigator({ DrawerNavigator: { screen: DrawerNavigator, navigationOptions: ({ navigation }) => { const { state } = navigation; if(state.isDrawerOpen) { return { headerLeft: ({titleStyle}) => ( <TouchableOpacity onPress={() => {navigation.dispatch(DrawerActions.toggleDrawer())}}> <Ionicons name="ios-close" style={styles.menuClose} size={36} color={titleStyle} /> </TouchableOpacity> ), } } else { return { headerLeft: ({titleStyle}) => ( <TouchableOpacity onPress={() => {navigation.dispatch(DrawerActions.toggleDrawer())}}> <Ionicons name="ios-menu" style={styles.menuOpen} size={32} color={titleStyle} /> </TouchableOpacity> ), } } } } }) export default createAppContainer(StackNavigator);
您可以創建一個內容組件以在 Drawer Navigator 中呈現,從而更容易修改。 我會用你的例子來解釋(我假設它是你的 App.js 文件):
//import CustomDrawer from '...'
const DrawerNavigator = createDrawerNavigator({
Home: {
screen: HomeScreen,
navigationOptions: ({ navigation }) => ({
title: 'Home Screen',
drawerLabel: 'Home',
drawerIcon: () => (
<Ionicons name="ios-home" size={20} />
)
})
},
Profile: {
screen: ProfileScreen,
navigationOptions: ({ navigation }) => ({
title: 'Profile Screen',
drawerLabel: 'Profile',
drawerIcon: () => (
<Ionicons name="ios-person" size={20} />
)
})
},
Settings: {
screen: SettingsScreen,
navigationOptions: ({ navigation }) => ({
drawerIcon: () => (
<Ionicons name="ios-settings" size={20} />
)
})
},
//Here you will add one more pair of curly brackets to add more configs.
}, {
initialRouteName: 'Home',
contentComponent: CustomDrawer //This is the option that will allow you to add the button
});
您將創建一個完整的組件以根據需要進行修改,然后在 Drawer Navigator 中進行渲染。 請記住,我使用的是 CustomDrawer 名稱,您將在 App.js 文件中導入此組件。
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import { Button } from 'react-native-elements';
import { DrawerNavigatorItems } from 'react-navigation-drawer';
const CustomDrawer = ({ ...props }) => {
return (
<>
<View>
<DrawerNavigatorItems
{...props}
itemsContainerStyle={{}}
itemStyle={{}}
/>
</View>
<View
style={{
flexDirection: 'row',
alignSelf: 'center',
position: 'relative',
marginBottom: 20,
}}
>
<Button
title={'Log out'}
buttonStyle={{ width: 200, borderRadius: 20 }}
onPress={}
/>
</View>
</>
);
};
const styles = StyleSheet.create({});
export default CustomDrawer;
在這里,我僅渲染 CustomDrawer 道具,即您在 App.js 中創建並渲染它的 itens(具體來說,它是我在 DrawerNavigationItems 中傳遞的 ...道具,因此您可以根據需要對其進行自定義,例如一個普通屏幕,放置按鈕,創建視圖並為其應用樣式。
您也可以不創建一個新屏幕來在您的 Drawer Navigator 中呈現在 App.js 中的代碼,但我個人覺得它很混亂
您可以通過本教程了解更多信息
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.