原生react :当我在TopTabNavigator中时，Android的后退按钮不会在第一次点击时返回

npm install @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

import React from 'react';
import { BackHandler } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { createStackNavigator } from '@react-navigation/stack';

const Tab = createMaterialTopTabNavigator();
const Stack = createStackNavigator();

// 用于处理Android后退按钮事件的函数
const handleBackPress = () => {
  // 处理后退逻辑
  // ...
  return true; // 返回true表示已经处理了后退事件
}

const HomeScreen = () => (
  <Tab.Navigator>
    {/* 在这里添加选项卡 */}
    {/* ... */}
  </Tab.Navigator>
);

const Navigation = () => {
  React.useEffect(() => {
    // 添加后退按钮事件监听器
    BackHandler.addEventListener('hardwareBackPress', handleBackPress);

    return () => {
      // 移除后退按钮事件监听器
      BackHandler.removeEventListener('hardwareBackPress', handleBackPress);
    };
  }, []);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default Navigation;

import React from 'react';
import { View } from 'react-native';
import Navigation from './Navigation';

const App = () => (
  <View style={{ flex: 1 }}>
    <Navigation />
  </View>
);

export default App;