¿Cómo transfiero el siguiente código de CLASE al componente FUNCIONAL? Esta parte de Backhandler parece pertenecer a React Native, por lo que pensé que podría convertirse en código funcional en lugar de estar dentro de una clase. Si conoce otras formas de lograr lo mismo con el botón Atrás, hágamelo saber.
Versiones actuales:
"react": "16.13.1", "react-native": "0.63.4", "react-navigation": "^4.4.4", "react-navigation-stack": "^2.10.4"Código:
import React, { Component } from "react"; import {... BackHandler... } from "react-native"; import { withNavigation } from "react-navigation"; class DetailScreen extends Component { componentDidMount() { BackHandler.addEventListener('hardwareBackPress', this.handleBackButton.bind(this)); } componentWillUnmount() { BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton.bind(this)); } handleBackButton = () => { this.props.navigation.pop(); return true; }; } const styles = StyleSheet.create({ ....... }) DetailScreen.navigationOptions = () => { return { header: () => null, ...TransitionPresets.SlideFromRightIOS, } } export default withNavigation(DetailScreen);Puede agregar esto en su componente funcional para lograr el mismo resultado, la primera parte le permite suscribirse al botón presionar en el montaje, y la declaración de devolución ocurre en el desmontaje para eliminar la suscripción.
useEffect(() => { const backHandler = BackHandler.addEventListener( "hardwareBackPress", () => { handleBackButton(); } ); return () => backHandler.remove(); //this might require edits based on your RN version }, []);la sintaxis utilizada podría ser diferente según su versión de RN, pero básicamente se suscribe dentro de este useEffect y cancela la suscripción en la devolución