React Navigation - 在退出应用程序之前创建确认屏幕

Question

我使用react-native和react-navigation（v5），在Android上，返回按钮会弹出每个屏幕，直到没有更多屏幕，然后退出应用程序。

我想阻止退出并在退出应用程序之前提示用户是|否，但检查 navigation.state 或 canGoBack 并没有指出退出前有关最终屏幕的任何线索

BackHandler.addEventListener('hardwareBackPress', () => {
    const canGoBack = navigation.canGoBack(); // always false
    const isFocused = navigation.isFocused(); // always true

    // TODO: how to check if we're on last screen?
    // I need to pop until last screen and display confirmation alert
    // navigation.state is a whole bunch of whores with no reliable way to check for last screen (I tried the _index_ and _history_

    if ( canGoBack && isFocused ) {
        navigation.goBack(); // never goes here
        return true; // means handled, default behaviour of popping screen won't be executed
    }
    return false; // not handled, react-navigation will pop screens and when no more screens to pop, will exit app
    // return true; // if I return true, no screens will get popped, and no auto-exit app also, but I need the pop until last
}

有人知道为什么navigation.canGoBack() 总是返回 false，以及是否真的有办法检查剩下多少屏幕？

Answer 1

  useFocusEffect(
    React.useCallback(() => {
      const onBackPress = () => {
        Alert.alert('Are you sure', 'Do you really want to exit?', [
          {
            text: 'Cancel',
            onPress: () => null,
            style: 'cancel',
          },
          {text: 'YES', onPress: () => BackHandler.exitApp()},
        ]);
        return true;
      };

      BackHandler.addEventListener('hardwareBackPress', onBackPress);

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

这段代码确实对我有用