React Native: diferentes estilos aplicados en el cambio de orientación

Nuestro grupo de redactores ha pasado mucho tiempo buscando para darle resolución a tus interrogantes, te compartimos la respuesta así que nuestro objetivo es resultarte de mucha ayuda.

Solución:

La solución se puede encontrar [here][1].

La orientación de las aplicaciones de vertical a horizontal y viceversa es una tarea que parece fácil pero que puede ser complicada en la reacción nativa cuando se debe cambiar la vista cuando cambia la orientación. En otras palabras, se pueden lograr diferentes vistas definidas para las dos orientaciones considerando estos dos pasos.

Importar dimensiones desde React Native

import  Dimensions  from 'react-native';

Para identificar la orientación actual y representar la vista en consecuencia

/**
 * Returns true if the screen is in portrait mode
 */
const isPortrait = () => 
    const dim = Dimensions.get('screen');
    return dim.height >= dim.width;
;

/**
 * Returns true of the screen is in landscape mode
 */
const isLandscape = () => 
    const dim = Dimensions.get('screen');
    return dim.width >= dim.height;
;

Para saber cuándo cambia la orientación para cambiar la vista en consecuencia

// Event Listener for orientation changes
    Dimensions.addEventListener('change', () => 
        this.setState(
            orientation: Platform.isPortrait() ? 'portrait' : 'landscape'
        );
    );

Montaje de todas las piezas

import React from 'react';
import 
  StyleSheet,
  Text,
  Dimensions,
  View
 from 'react-native';

export default class App extends React.Component 
  constructor() 
    super();

    /**
    * Returns true if the screen is in portrait mode
    */
    const isPortrait = () => 
      const dim = Dimensions.get('screen');
      return dim.height >= dim.width;
    ;

    this.state = 
      orientation: isPortrait() ? 'portrait' : 'landscape'
    ;

    // Event Listener for orientation changes
    Dimensions.addEventListener('change', () => 
      this.setState(
        orientation: isPortrait() ? 'portrait' : 'landscape'
      );
    );

  

  render() 
    if (this.state.orientation === 'portrait') 
      return (
          //Render View to be displayed in portrait mode
       );
    
    else 
      return (
        //Render View to be displayed in landscape mode
      );
    

  

Como el evento definido para buscar el cambio de orientación usa este comando ‘este.setState()‘, este método vuelve a llamar automáticamente a ‘prestar()‘ para que no tengamos que preocuparnos por renderizarlo de nuevo, ya está todo arreglado.

Puedes usar el onLayout apuntalar:

export default class Test extends Component 

  constructor(props) 
    super(props);
    this.state = 
      screen: Dimensions.get('window'),
    ;
  

  getOrientation()
    if (this.state.screen.width > this.state.screen.height) 
      return 'LANDSCAPE';
    else 
      return 'PORTRAIT';
    
  

  getStyle()
    if (this.getOrientation() === 'LANDSCAPE') 
      return landscapeStyles;
     else 
      return portraitStyles;
    
  
  onLayout()
    this.setState(screen: Dimensions.get('window'));
  

  render() 
    return (
      

      
      );
    
  
}

const portraitStyles = StyleSheet.create(
 ...
);

const landscapeStyles = StyleSheet.create(
  ...
);

Aquí está la respuesta de @Mridul Tripathi como un gancho reutilizable:

// useOrientation.tsx
import useEffect, useState from 'react';
import Dimensions from 'react-native';

/**
 * Returns true if the screen is in portrait mode
 */
const isPortrait = () => 
  const dim = Dimensions.get('screen');
  return dim.height >= dim.width;
;

/**
 * A React Hook which updates when the orientation changes
 * @returns whether the user is in 'PORTRAIT' or 'LANDSCAPE'
 */
export function useOrientation(): 'PORTRAIT' | 'LANDSCAPE' 
  // State to hold the connection status
  const [orientation, setOrientation] = useState<'PORTRAIT' 

Luego puedes consumirlo usando:

import useOrientation from './useOrientation';

export const MyScreen = () => 
    const orientation = useOrientation();

    return (
        
    );

Comentarios y puntuaciones del artículo

Si haces scroll puedes encontrar las notas de otros usuarios, tú asimismo tienes la opción de insertar el tuyo si lo crees conveniente.

---

---

Utiliza Nuestro Buscador