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