Question

我用BackHandler形式反应本机项目。按下后退按钮时，我从主页使用BackHandler.exitApp（）退出了应用程序，但是当按下后退按钮直接退出应用程序时，则形成了其他所有页面。

获取主页

export const Start = ({navigation}) => {
useEffect(() => {
    const backHandler = BackHandler.addEventListener(
        "hardwareBackPress",
        ()=>{
            BackHandler.exitApp()
        }
      );
      return () => backHandler.remove();
},[])};

其他页面的来源

useEffect(() => {

        setInterval(()=>{
    const backHandler = BackHandler.addEventListener(
        "hardwareBackPress",
        ()=>{
            navigation.navigate('Start');
        }
      );
       return () => backHandler.remove();


},[]);

Answer 1

这是因为您没有清理监听器：

// main
export const Start = ({navigation}) => {
    const exitApp = () => BackHandler.exitApp()

    useEffect(() => {
    const backHandler = BackHandler.addEventListener("hardwareBackPress", exitApp);
    // cleanup 
    return () => backHandler.removeEventListener("hardwareBackPress", exitApp);
    },[])
};

// other
export const OtherPage = ({ navigation }) => {
    const goToStart = () => navigation.navigate('Start');

    useEffect(() => {
    const backHandler = BackHandler.addEventListener("hardwareBackPress", goToStart);
    // cleanup 
    return () => backHandler.removeEventListener("hardwareBackPress", goToStart);
    },[])
}

Answer 2

在将项目升级到react-navigation v5之后，我也面临着相同的问题，然后，我看到了react-navigation推荐的子模块库react-navigation-backhandler，在您的开始屏幕中使用了它，并且没有编写任何内容在其他屏幕上返回处理程序列表器。.https://reactnavigation.org/docs/community-libraries-and-navigators/#react-navigation-backhandlerenter代码在这里

import {AndroidBackHandler} from 'react-navigation-backhandler';
export const Start = ({navigation}) => {
useEffect(() => {
    const backHandler = BackHandler.addEventListener(
        "hardwareBackPress",
        ()=>{
            BackHandler.exitApp()
        }
      );
      return () => backHandler.remove();
},[])

return (
<AndroidBackHandler>
{...elements}
</AndroidBackHandler>
)
};

Answer 3

我是React js开发的新手，我正在发送答案以响应本机，肯定会为您的正常工作提供一个思路。

import { BackHandler } from 'react-native';

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

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

onBackPress = () => {
    this.props.navigation.goBack();
    return true;
};

或者您也可以尝试在标题中使用导航后退按钮

static navigationOptions = ({ navigation }) => ({
    headerLeft: (
        <View style={styles.navIcon} >
            <Icon
                name='arrow-back'
                type='Ionicon'
                color='#01AAEF'
                onPress={() => { navigation.goBack() }}
                size={28} />
        </View>
    )
});

Answer 4

你应该这样使用

export const Start = ({navigation}) => {
  const backAction = () => {
if(navigation.isFocused())
{
  Alert.alert("Hold on!", "Are you sure you want to exit app?", [
    {
      text: "Cancel",
      onPress: () => null,
      style: "cancel"
    },
    { text: "YES", onPress: () => BackHandler.exitApp() }
  ]);
  return true;
}
};

useEffect(() => {
BackHandler.addEventListener("hardwareBackPress", backAction);

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

React Native BackHandler无法正常工作

4 个答案: