Cómo prevenir que un componente de React Native se renderice dos veces al cambiar la orientación.
Estoy tratando de obtener la orientación de un dispositivo. Soy capaz de hacerlo con mi código actual y funciona, sin embargo hay un problema. Cuando el dispositivo cambia de orientación el componente se renderiza dos veces. No estoy seguro de qué estoy haciendo mal. ¿Cómo puedo arreglar este código para que no se renderice dos veces cuando cambie la orientación del dispositivo?
import React, {useEffect, useState} from 'react';
import {Dimensions} from 'react-native';
const OrientationContext = React.createContext();
const OrientationProvider = props => {
const [orientation, setOrientation] = useState({
orientation: 'LANDSCAPE',
screenWidth: null,
screenHeight: null,
});
const determineAndSetOrientation = () => {
let width = Dimensions.get('window').width;
let height = Dimensions.get('window').height;
if (width < height) {
setOrientation({
orientation: 'PORTRAIT',
screenWidth: width,
screenHeight: height,
});
} else {
setOrientation({
orientation: 'LANDSCAPE',
screenWidth: width,
screenHeight: height,
});
}
};
useEffect(() => {
determineAndSetOrientation();
const subscription = Dimensions.addEventListener('change', determineAndSetOrientation); // prettier-ignore
return () => {
subscription.remove();
};
}, []);
console.log(orientation, 'rendering');
return (
<orientationcontext.provider value="{{orientation}}">
{props.children}
</orientationcontext.provider>
);
};
export {OrientationProvider, OrientationContext};
davy.ai
Parece que estás utilizando la API
Dimensions
dereact-native
para detectar la orientación del dispositivo. El problema es que la APIDimensions
se activa dos veces cuando cambia la orientación del dispositivo. Para solucionarlo, puedes usar el métodoaddEventListener
de la APIDimensions
para detectar el cambio de orientación del dispositivo y luego llamar a la funcióndetermineAndSetOrientation
. También puedes usar el métodoremove
para darte de baja del evento de escucha cuando el componente se desmonta.