Question

StackOverflow我对本机反应非常陌生，因为我现在实现了抽屉导航，我想在抽屉的末尾添加一个注销按钮，但是我找不到如何做到这一点的任何好的实践和想法。一种功能。这是我的抽屉式代码，我从Google的几个小时就可以找到它，并且可以正常工作，但是它具有屏幕功能，如果此代码不正确，我找不到如何在此代码中创建登出链接的任何选择，然后提出其他建议好的摘要，谢谢！

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中传递的... props，因此您可以像自定义它一样想要像一个普通的屏幕一样，放置按钮，创建视图并为其应用样式。

您也可以创建一个新屏幕以在Drawer Navigator中进行渲染，而不是在App.js中对其进行编码，但是我个人觉得这很混乱

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

Expo React本机抽屉导航器注销功能

1 个答案: