خروج از از ری اکت نیتیو با زدن دو بار بک

دنبال یک روشی میگشتم که توی React_native و کتابخانه React_navigation بتونم دقیقا مثل Android Native بیام و دابل بک بذارم برای خروج از اپلیکیشن . خب ایده خوبی به نظر نمیاد ولی کار فرما میخواست این رو . به عنوان اولین راه حل رفتم سراغ BackHandler و هندل کردن توی componentWillUnmount و componentDidMount و اینجا متوجه شدم که کلا توی روش روتینگ من اصلا اجرا نمیشه زمان navigation کردن . کلی کتابخونه مختلف . redux و... تست کردم و یا روشم کلا به درد نمیخورد یا برای تغییر توی پروژه من زمان زیادی باید صرف میکردم . در نتیجه به راه حل جالبی رسیدم.

مشکل دقیقا کجا بود؟مشکل زمانی بود که در componentDidMount وقتی که BackHandler.addEventListener رو ست میکردم تو بقیه کامپوننت هام همین رو هندل میکرد .خب راه حل های زیادی برای این کار هست بهترین راهش این که مثل من که کامپوننت بسازی به شکل زیر :

import React, { Component } from "react";
import { withNavigation } from "react-navigation";
import { BackHandler } from "react-native";
class HandleBack extends Component {
constructor(props) {
super(props);
this.didFocus = props.navigation.addListener("didFocus", payload =>
BackHandler.addEventListener("hardwareBackPress", this.onBack),
);
}
componentDidMount() {
this.willBlur = this.props.navigation.addListener("willBlur", payload =>
BackHandler.removeEventListener("hardwareBackPress", this.onBack),
);
}
onBack = () => {
return this.props.onBack();
};
componentWillUnmount() {
this.didFocus.remove();
this.willBlur.remove();
BackHandler.removeEventListener("hardwareBackPress", this.onBack);
}
render() {
return this.props.children;
}
}
export default withNavigation(HandleBack);

حالا قدم بعدی فقط و فقط اینه به شکل زیر در کاپوننت اصلی یا همون home به شکل زیر فراخوانیش کنید

<HandleBack onBack={() => {}}>
<Main>

</Main>

<HandleBack>

حالا دیگه میتونید به هر روشی که خواستید توی onBack هندل کنید . اینجوری دیگه بقیقه کاپوننت هاتون تحت تاثیر نخواهد بود.