Question

我想防止用户回到以前的屏幕上来。因此,我添加了法典,但这不是工作。是否有解决办法? 警惕的蔓延是显而易见的,但“回落的假”并不奏效。

componentDidMount() {
   BackAndroid.addEventListener( hardwareBackPress , () => {
     Alert.alert("alert","alert")

      this.props.navigator.pop();

       return false;
   });

Answer 1

如果你想要消除违约背后的行为,你需要return real。

这里的样本部分将阻止用户回到以前的屏幕上。

import React, {Component,} from  react ;
import {
    View,
    Text,
    BackHandler,
    ToastAndroid,
} from  react-native ;

class BackButtonDemo extends Component {
    componentDidMount() {
        BackHandler.addEventListener( hardwareBackPress , this.handleBackButton);
    }

    componentWillUnmount() {
        BackHandler.removeEventListener( hardwareBackPress , this.handleBackButton);
    }

    handleBackButton() {
        ToastAndroid.show( Back button is pressed , ToastAndroid.SHORT);
        return true;
    }

    render() {
        return (
            <View>
                <Text>Back button example</Text>
            </View>
        );
    }
}

module.exports = BackButtonDemo;

Note:

还删除了<条码>,即:props.navigator.pop();。

<代码>Navigator pop function will take theuser to the previous Screen made by Navigator。

Answer 2

import React, {Component, useEffect} from  react ;
import {
    View,
    Text,
    BackHandler,
} from  react-native ;

const LogInView = () => {

    useEffect(() => {
      const backHandler = BackHandler.addEventListener( hardwareBackPress , () => true)
      return () => backHandler.remove()
    }, [])

    return (
        <View>
            <Text>Back button example</Text>
        </View>
    );
}

export default LoginView

Answer 3

我对我背后纽特(罗安德德)申请整个适用感到不解,在适用时添加这一法典。

componentDidMount() {
  BackAndroid.addEventListener( hardwareBackPress , this.handleBackButton);
}

componentWillUnmount() {
  BackAndroid.removeEventListener( hardwareBackPress , this.handleBackButton);
}

handleBackButton() {
  return true;
}

不要忘记进口 Back安第斯roid

import {BackAndroid} from  react-native

Answer 4

仅恢复真实情况

import {BackAndroid} from  react-native ;

componentWillMount() {
   BackAndroid.addEventListener( hardwareBackPress , () => {return true});
}

Answer 5

So While Everyone is working with the Backhandler of react-native I tried to do it with react-navigation to prevent going back handler. This worked for me. If you just want to prevent going back without showing or alerting anything to the user.

React.useEffect(() => {
        navigation.addListener( beforeRemove , (e) => {
            e.preventDefault();
        });
    }, [navigation]);

你可以把这一守则列入你的职能部分。

Use Case:

In User Registration when the user signup and go to the confirmation screen for the code so we dont want him back you can use this code at the moment.

Answer 6

Just to give you a complete answer when using react-navigation:

如果你重新使用反应堆,请在RootNavigation category而不是“app.js”上放置以下位置,以便在整个应用中解脱背布。

import { BackHandler } from  react-native ;

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

componentWillUnmount() {
    BackHandler.removeEventListener( hardwareBackPress , this.onBackButtonPressed);
}

onBackButtonPressed() {
    return true;
}

Answer 7

using the BackHandler from react native worked for me. Just include this line in your ComponentWillMount:

BackHandler.addEventListener( hardwareBackPress , function() {return true})

it will disable back button on android device.

Answer 8

如果您使用react-natigation,则您需要使用BackHandler而不是BackAndroid <>/code>。



import { BackHandler } from  react-native ;

// code

componentDidMount() {
  BackHandler.addEventListener( backPress );
}

// some more code

componentWillUnmount() {
  BackHandler.removeEventListener( backPress );
}

Answer 9

模块反应能力可用背纽扣

const hardwareBackPressCustom = useCallback(() => {
        return true;
    }, []);

useFocusEffect(() => {
    BackHandler.addEventListener( hardwareBackPress , hardwareBackPressCustom)
    return () => {
      BackHandler.removeEventListener( hardwareBackPress , hardwareBackPressCustom)
    };
  }, []);

Answer 10

对于那些在答复中发表意见并试图找到一部能够使背井离破碎的守则的人,这部守则只是在一个并非整个应用的具体屏幕上点击。欢迎你。

useFocusEffect(
    React.useCallback(() => {
        const onBackPress = () => {
            return true;
        };
        BackHandler.addEventListener( hardwareBackPress , onBackPress);
    
        return () =>
            BackHandler.removeEventListener( hardwareBackPress , onBackPress);
    }, []),
);

Answer 11

对我来说,这是解决办法:

import React, { useEffect } from  react 
import { View } from  react-native 

function Home({ navigation }) {
    useEffect(() =>
        navigation.addListener( beforeRemove , (e) => {
            e.preventDefault();
            return
        }),
        [navigation]
    );


    return (
        <View>
            
            ...

        </View>
    )
}

export default Home

参看。

Answer 12

唯一的正确解决办法见:https://reactnavigation.org/docs/custom-android-back-button-handling/。

function ScreenWithCustomBackBehavior() {
  // ...

  useFocusEffect(
    React.useCallback(() => {
      const onBackPress = () => {
        return true;
      };

      BackHandler.addEventListener( hardwareBackPress , onBackPress);

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

  // ...
}

所有其他设备都用于各组,或适用于所有屏幕,而不是只用于应用ook的屏幕。

Answer 13

import React, {useEffect} from  react ;
import {BackHandler} from  react-native ;
    
useEffect(() => {

const backHandler = BackHandler.addEventListener(
         hardwareBackPress ,
        () => {
          return true;
        },
      );
      return () => backHandler.remove();
})

Answer 14

你与<代码>return false没有工作的问题,是因为 BackAndroid FCCC/SBI/2008/INF.1。最近版本的《土著反应》。

为防止对硬件后报采取行动,你可以使用“落后报”软件。这里是你可以在导航屏幕上使用的cus>。

守则:

import { useFocusEffect } from  @react-navigation/native ;
import { useCallback } from  react ;
import { BackHandler } from  react-native ;

/**
 * Hook that handles Android back button presses and returns the callback
 */
export function useAndroidBackButtonHandler(handler: any) {
  useFocusEffect(
    useCallback(() => {
      BackHandler.addEventListener( hardwareBackPress , handler);
      return () => BackHandler.removeEventListener( hardwareBackPress , handler);
    }, [handler])
  );
}

并在你的导航屏幕上使用:

const YourComponent = () => {
.
.
.
  const handleBackPress = (): boolean => {
    ToastAndroid.show( Back button press is disabled , ToastAndroid.SHORT);
    return true;
  };

  useAndroidBackButtonHandler(handleBackPress);
.
.
}

希望这一帮助!

Answer 15

Just an Update for edition 6.x as see in RN docs

  function ScreenWithCustomBackBehavior() {
  // ...

  useFocusEffect(
    React.useCallback(() => {
      const onBackPress = () => {
        if (isSelectionModeEnabled()) {
          disableSelectionMode();
          return true;
        } else {
          return false;
        }
      };

      BackHandler.addEventListener( hardwareBackPress , onBackPress);

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

  // ...
}

Alternatively as a hook

import {useNavigation} from  @react-navigation/native ;
import {useEffect, useState, useCallback} from  react ;

export const usePreventGoBack = () => {
  const navigation = useNavigation();
  const [allow, setAllow] = useState(false);

  const beforeRemoveListener = useCallback(
    e => {
      if (allow) {
        return;
      }
      e.preventDefault();
    },
    [allow],
  );

  useEffect(() => {
    const unsub = navigation.addListener( beforeRemove , beforeRemoveListener);
    return () => {
      unsub();
    };
  }, [navigation, beforeRemoveListener, allow]);

  return (cb: () => void) => {
    setAllow(true);
    setTimeout(() => {
      cb();
    });
  };
};

绕行

 const continuePressed = () => {
    allowBackButton(() => {
      navigation.popToTop();
    });
  };

Answer 16

这里要简单地论述:

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

type BackHandlerFunction = () => boolean;

export function useBackHandler(handler?: BackHandlerFunction) {
  useEffect(() => {
    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      () => {
        if (handler) {
          return handler();
        }
        return true;
      }
    );

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

Answer 17

IOS使用该守则...... 在萨克航。反应能力;5

<LoginStackNav.Screen name="Home" component={Home} options={{gestureEnabled: false }}/>

友情链接