如何让 react-native 中的后处理程序返回主屏幕而不是退出应用程序？

Question

在官方文档中backhandler 在 react native 中，用于退出应用程序的后处理程序。

这是文档

useEffect(() => {
    const backAction = () => {
      Alert.alert("Hold on!", "Are you sure you want to go back?", [
        {
          text: "Cancel",
          onPress: () => null,
          style: "cancel"
        },
        { text: "YES", onPress: () => BackHandler.exitApp() }
      ]);
      return true;
    };

    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backAction
    );

    return () => backHandler.remove();
  }, []);

我想做的是简化它，而不是退出应用程序，我想在点击physical back button(backhandler)时将其导航到主页

这里是代码

const CheckOutOrderReceipt = ({navigation, route}) => {
  const {OrderId} = route.params;

  useEffect(() => {
    const backAction = () => {
      BackHandler.navigation.reset({
        index: 0,
        routes: [{name: 'Home'}],
      });
            return true
    };
    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      backAction,
    );
    return () => backHandler.remove();
  }, []);

但是什么时候按后退按钮。我收到了这个错误

undefined is not an object (evaluating '_reactNative.BackHandler.navigation.reset')

我做错了什么。有人请推荐

Answer 1

BackHandler 只负责 Android 的后退按钮。 所以它没有 navigation 相关的东西。

你可以简单地使用导航道具

import { CommonActions } from '@react-navigation/native';
...
const backAction = () => {
navigation.dispatch(
  CommonActions.reset({
     index: 0,
     routes: [{name: 'Home'}],
  })
);
}

而且我们不想让听众一团糟，我们会使用useFocusEffect 而不是useEffect

我们在一起有这样的东西：

const CheckOutOrderReceipt = ({ navigation, route }) => {
  const { OrderId } = route.params

  useFocusEffect(
    React.useCallback(() => {
      const onBackPress = () => {
        Alert.alert('Hold on!', 'Are you sure you want to exit app?', [
          {
            text: 'Cancel',
            onPress: () => null,
            style: 'cancel'
          },
          {
            text: 'YES',
            onPress: () => {
              navigation.dispatch(
                CommonActions.reset({
                  index: 0,
                  routes: [{ name: 'Home' }]
                })
              )
            }
          }
        ])
      }

      BackHandler.addEventListener('hardwareBackPress', onBackPress)

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

Answer 2

您需要在主屏幕中添加此代码

import { BackHandler } from 'react-native'

useEffect(() => {
    BackHandler.addEventListener('hardwareBackPress', backAction);

    return () =>
        BackHandler.removeEventListener('hardwareBackPress', backAction);
}, []);

  const backAction = () => {
    if (navigation.isFocused()) {
        Alert.alert('Hold on!', 'Are you sure you want to exit app?', [
           {
               text: 'Cancel',
                onPress: () => null,
                style: 'cancel',
            },
           { text: 'YES', onPress: () => BackHandler.exitApp() },
        ]);
        return true;
    }
};