React Navigation ReferenceError：找不到变量：isSelectionModeEnabled

Question

我在 react-native 应用程序中使用 React Navigation。 因此，我按照https://reactnavigation.org/docs/custom-android-back-button-handling/上的文档使用此代码段实现自定义 Android 后退按钮行为。

屏幕一.js

import React, {useCallback} from 'react';
import {useFocusEffect} from '@react-navigation/native';
import {
 View,
 Text,
 BackHandler,
} from 'react-native';

export function ScreenOne({navigation}) {
 
 useFocusEffect(
   useCallback(() => {
     const onBackPress = () => {
       if (isSelectionModeEnabled()) {
         disableSelectionMode();
         return true;
       } else {
         return false;
       }
     };

     BackHandler.addEventListener('hardwareBackPress', onBackPress);

     return () =>
       BackHandler.removeEventListener('hardwareBackPress', onBackPress);
   }, [isSelectionModeEnabled, disableSelectionMode])
 );

 return (
   <View>
     <Text>Demo</Text>
   </View>
 )
}

堆栈.js

import React from 'react';
import {createStackNavigator, HeaderBackButton} from '@react-navigation/stack';
import {
  ScreenOne,
  ScreenTwo,
} from '../screens';

const Stack = createStackNavigator();

function AppStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="ScreenTwo"
        component={ScreenTwo}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="ScreenOne"
        component={ScreenOne}
        options={({navigation}) => ({
          headerShown: true,
          headerLeft: () => (
            <HeaderBackButton
              onPress={() => {
                navigation.replace('ScreenTwo');
              }}
            />
          ),
        })}
      />
    </Stack.Navigator>
  );
}

export default AppStack;

根导航.js

import {createRef} from 'react';

export const isReadyRef = createRef();
export const navigationRef = createRef();

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

export function goBack() {
  navigationRef.current?.goBack();
}

应用程序.js

import 'react-native-gesture-handler';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import Stack from './navigators/Stack';
import {navigationRef} from './navigators/RootNavigation';
import {AuthContext} from './context';

const App = () => {
  return (
    <AuthContext.Provider>
      <NavigationContainer ref={navigationRef}>
        <Stack />
      </NavigationContainer>
    </AuthContext.Provider>
  );
};

export default App;

当我按下应用程序后退按钮时，我不断收到此错误：

ReferenceError：找不到变量：isSelectionModeEnabled

Answer 1

isSelectionModeEnabled和disableSelectionMode只是一个示例。 类似于“如果 Modal 打开，关闭它而不是向后导航，否则保持默认的后退按钮行为”。

您不需要它，您应该为自己的用例实现自己的逻辑并返回true以防止默认导航！ 返回false将保留默认的后退按钮行为。

如果您只想在任何情况下阻止返回按钮，只需执行以下操作：

 const onBackPress = () => {
   return true;
 };

这里的相关文档： https://reactnative.dev/docs/backhandler