React Native BackHandler不能正常工作

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>
    )
});