Expo React Native Drawer Navigator 注销功能

Question

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);

Answer 1

您可以创建一个内容组件以在 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 中的代码，但我个人觉得它很混乱

您可以通过本教程了解更多信息