React Native 抽屉导航中实现Log out登出按钮的相关问题咨询

实现方案 #

你当前的配置是将Log out作为抽屉的路由项，点击后会先跳转到SettingsScreen页面，需要二次点击才能触发登出。要实现点击抽屉的Log out选项直接调用登出方法，可选择以下两种方案：

方案1：SettingsScreen加载时自动触发登出（改造成本最低） #

无需调整抽屉导航配置，直接修改SettingsScreen.js，页面挂载后自动调用登出方法：

export default class SettingsScreen extends React.Component {
  // 新增生命周期函数，页面加载完成直接触发登出
  componentDidMount() {
    this.signOut()
  }

  signOut = async () => {
    try {
      await firebase.auth().signOut();
      this.props.navigation.navigate("WelcomeScreen");
    } catch (error) {
      Alert.alert("登出失败", error.message);
    }
  };

  render() {
    // 可添加加载提示优化跳转前的视觉体验
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>正在登出...</Text>
      </View>  
    );
  }
}

方案2：自定义抽屉内容（体验更优） #

将登出按钮作为抽屉的独立操作项，不需要单独分配路由，点击后直接触发登出，无需页面跳转：
首先修改App.js的抽屉导航配置：

// 导入依赖组件
import { DrawerItems, SafeAreaView } from 'react-navigation';
import { View, Text, TouchableOpacity, Alert } from 'react-native';
import firebase from 'firebase/app';
import 'firebase/auth';

// 自定义抽屉内容组件
const CustomDrawerContent = (props) => (
  <SafeAreaView style={{flex: 1}}>
    {/* 渲染原有抽屉菜单项 */}
    <DrawerItems {...props} />
    {/* 新增独立登出按钮 */}
    <TouchableOpacity 
      onPress={async () => {
        try {
          await firebase.auth().signOut();
          props.navigation.navigate("WelcomeScreen");
        } catch (error) {
          Alert.alert("登出失败", error.message);
        }
      }}
      style={{padding: 16, flexDirection: 'row', alignItems: 'center'}}
    >
      <Icon name="settings" size={25} />
      <Text style={{marginLeft: 32, fontSize: 14}}>Log out</Text>
    </TouchableOpacity>
  </SafeAreaView>
);

// 调整抽屉导航配置
const AppHomeTeacherDrawerNavigator = createDrawerNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      title: "Menu",
      drawerIcon: () => <Icon name="home" size={25} />,
    },
  },
  // 移除原有的SettingsScreen路由项
}, {
  // 绑定自定义抽屉内容
  contentComponent: CustomDrawerContent
}); 

两种方案都可以实现需求，方案1不需要修改导航结构，适合快速迭代；方案2交互更流畅，符合主流应用的登出操作逻辑。

内容的提问来源于stack exchange，提问作者user123456