React Native Expo BackHandler 功能

Question

可以仅将

backhandler

添加到一个屏幕吗？

我使用底部选项卡和堆栈导航

tab : {
 screen : stack A,
 screen : stack B,
}

stack A : {
 screen : screen A1,
 screen : screen A2,
 screen : screen A3
}
stack B : {
 screen : screen B1,
 screen : screen B2
}

我可以从屏幕 B1 导航到屏幕 A2，以及从屏幕 A1 导航到 A2。

如果我从屏幕 B1 导航到 A2 并在 A2 中按回，屏幕 B1 应该聚焦， 与屏幕 A1 至 A2 相同。

我尝试在屏幕 A2 中添加返回处理程序，并从 B1 和 A1 传递标志以导航到相应的屏幕。

问题是当我在屏幕 A3 中按返回时，无法重定向到屏幕 A2。

I need to handle back button only on screen A2.

Answer 1

您可以像

一样使用

BackHandler

使用

react-navigation

在组件中创建

BackHandler.js

import { BackHandler } from "react-native";
import React from "react";

function ProfileScreen({ onBackPress }) {
  React.useEffect(() => {
    React.useCallback(() => {
      BackHandler.addEventListener("hardwareBackPress", onBackPress);

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

用法如

import BackHandler from "./components";

renderBackHandler = () => {
      return (
        <BackHandler
          onBackPress={() => {
            this.handleBackPress();
            return false;
          }}
        />
      );
    } 

render(){
  // ...

  {this.renderBackHandler()}

  // ...
}

Answer 2

您可以创建一个 React hook 或只是一个可以调用的功能组件，并且可以在组件中包含导航。您可以检查导航状态，如果不在相应的导航状态（视图）中，只需退出应用程序即可。

import {  BackHandler, Alert } from 'react-native'
import { useNavigation } from '@react-navigation/native'


export const HardwareBackPress = () => {
  const navigation = useNavigation()

  const backAction = () => {
    if (navigation.getState().routes[loc.routes.length - 1].name != 'DashBoard'){

    }else{
      Alert.alert('기다리다!', '정말 나가시겠습니까?', [
        {
          text: '취소',
          onPress: () => null,
          style: '취소',
        },
        { text: '예', onPress: () => BackHandler.exitApp() },
      ]);
      return true;
    }
  };

  function backPressAssign() {
    const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
    return () => backHandler.remove();
  }

  return {
    backPressAssign,
  }
}

Answer 3

你可以试试这个

import { View, Text, BackHandler, ToastAndroid, Platform } from "react-native";
import React, { useEffect, useState } from "react";

export default function Login() {
  const platform = Platform
  const [exitApp, updateExitApp] = useState(false)

  useEffect(() => {
    const backAction = () => {
      exitApp ? BackHandler.exitApp() : platform.OS === "android" && ToastAndroid.show('exit app', ToastAndroid.SHORT);
      updateExitApp(true)
      setTimeout(() => {
        updateExitApp(false)
      }, 3000);
    };

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

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

  return (
    <View style={{justifyContent:"center",alignItems:"center"}}>
      <Text>My app page</Text>
    </View>
  );
}