Реагировать на родной BackHandler не работает должным образом - PullRequest
Новая
       9

Реагировать на родной BackHandler не работает должным образом

0 голосов
/ 27 апреля 2020

Я использовал форму 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();


},[]);

Ответы [ 3 ]

2 голосов
/ 27 апреля 2020

Это потому, что вы не чистите слушателя: 

// 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);
    },[])
}
0 голосов
/ 27 апреля 2020

Я новичок в разработке 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>
    )
});
0 голосов
/ 27 апреля 2020

Я также столкнулся с той же проблемой после обновления моего проекта до response-navigation v5, затем я увидел рекомендованную под-модулем реагирующую навигацию библиотеку response-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>
)
};
...