时间戳

首页 > 解决方案 > 如何在一个屏幕而不是整个应用程序中处理退出应用程序 - React Native？

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

问题描述

我对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);

标签： javascriptandroidreactjsreact-nativereact-navigation

解决方案

您可以在调用警报之前检查屏幕是否已聚焦，而不是检查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 }
    );
}

推荐阅读