如何在一个屏幕而不是整个应用程序中处理退出应用程序 - React Native？

Question

我对 BackHandler 有一些问题，问题是

当运行应用程序并转到比方说注册屏幕并在我的手机中触摸背面时，它们将运行该功能并显示警报以确认，但现在当我转到任何其他屏幕并触摸背面时，它们会我需要在每个 backHandler.exitApp(); 上返回上一个屏幕。运行，虽然我写如果 routname 是 SignUp 只是退出应用程序而不是其他屏幕

这是我的代码

注册

    import React from "react";
    import {
      Text,
      TextInput,
      ActivityIndicator,
      View,
      KeyboardAvoidingView,
      ScrollView,
      Image,
      TouchableOpacity,
      BackHandler,
      Alert
    } from "react-native";
    export default class signUp extends React.Component {
      constructor(props) {
        super(props);

      }

      componentDidMount() {
        BackHandler.addEventListener("hardwareBackPress", this.backPressed);
      }

      componentWillUnmount() {
        BackHandler.removeEventListener("hardwareBackPress", this.backPressed);
      }
      backPressed = () => {
    let { routeName } = this.props.navigation.state;
    console.log("route is :  " + routeName);

    if (routeName == "SignUp") {
      console.log("ROUTE :  " + routeName);
      Alert.alert(
        "Exit App",
        "Do you want to exit?",
        [
          {
            text: "No",
            onPress: () => console.log("Cancel Pressed"),
            style: "cancel"
          },
          { text: "Yes", onPress: () => BackHandler.exitApp() }
        ],
        { cancelable: false }
      );
      return true;
    } else {
      return false;
    }
  };

      render() {....}
    }

路线

import { createStackNavigator, createAppContainer } from "react-navigation";
import React from "react";
import { View } from "react-native";
import Splash from "../screens/Splash";
import Home from "../screens/Home";
import SignUp from "../screens/SignUp";
import SignIn from "../screens/SignIn";
import ForgetPassword from "../screens/ForgetPassword";

const Routes = createStackNavigator(
  {
    Splash: {
      screen: Splash,
      navigationOptions: {
        header: null
      }
    },
    SignUp: {
      screen: SignUp,
      navigationOptions: () => ({
        // header: null
        title: "Sign Up",
        headerLeft: null,
        headerTintColor: "#fc0301",
        headerStyle: {
          borderBottomColor: "white"
        },
        headerTitleStyle: {
          color: "#fc0301",
          textAlign: "center",
          flex: 1,
          elevation: 0,
          fontSize: 25,
          justifyContent: "center"
        }
      })
    },
    SignIn: {
      screen: SignIn,
      navigationOptions: {
        title: "Sign In",
        headerRight: <View />,
        headerTintColor: "#fc0301",
        headerStyle: {
          borderBottomColor: "white"
        },
        headerTitleStyle: {
          color: "#fc0301",
          textAlign: "center",
          flex: 1,
          elevation: 0,
          fontSize: 25,
          justifyContent: "center"
        }
      }
    },
    ForgetPassword: {
      screen: ForgetPassword,
      navigationOptions: {
        header: null
      }
    },
    Home: {
      screen: Home,
      navigationOptions: {
        header: null
      }
    }
  },
  {
    initialRouteName: "Splash"
  }
);

export default createAppContainer(Routes);

Answer 1

您可以在调用警报之前检查屏幕是否已聚焦，而不是从导航中检查routeName。

更新后的代码可能如下所示。

if (this.props.navigation.isFocused()) {
    Alert.alert(
    "Exit App",
    "Do you want to exit?",
    [
      {
        text: "No",
        onPress: () => console.log("Cancel Pressed"),
        style: "cancel"
      },
      { text: "Yes", onPress: () => BackHandler.exitApp() }
    ],
    { cancelable: false }
    );
}

Answer 2

版本 5+，尝试使用navigation.canGoBack()。

我是从Zennichimaro's comment 发现的。

如果您的堆栈中只有一个屏幕。

navigation.canGoBack() //=> false

如果堆栈中您下方至少有一个屏幕。

即如果有一个屏幕可以“返回”到。

navigation.canGoBack() //=> false

navigation.navigate( "screen2" );

navigation.canGoBack() //=> true

navigation.goBack();

navigation.canGoBack() //=> false

Answer 3

您必须通过递归调用 dangerouslyGetParent 来获取 ROOT 导航器的 navigation 对象

例如 如果你有这样的层次结构：

• 底部标签（TabNavigator）

  • 浏览器（StackNavigator）
  • 设置（堆栈导航器）
    • 关于（屏幕）

并且您想在您的androidBackHandler 中获取当前的routeName 它连接在您的Browser 屏幕中，那么您应该通过调用dangerouslyGetParent 两次（这是您的导航树的深度）来获取您的BottomTabs 的导航对象：

const bottomTabsNavigation = navigation
      .dangerouslyGetParent()
      .dangerouslyGetParent();

如果您在About 屏幕上尝试console.log 您的bottomTabsNavigation，您应该会看到类似的内容