Trabalhando com diferentes Layouts para orientação 초상화 및 풍경

동기

Eu nunca tinha trabalhado em um projeto em que o app deveria ter dois diferentes layouts: Um para a orientação portrait e outro para orientação landscape. Então, por curiosidade, decidir criar um projeto com essa funcionalidade.

프로젝트

O 앱 구성 em uma tela que quando está na orientação portrait, ele terá o seguinte 레이아웃:



Quando o app estiver na orientação landscape, o mesmo terá o seguinte layout:

바모스 코다르

import  React,{useState, useEffect} from 'react';
import { Text, View, StyleSheet, TextInput, Image, KeyboardAvoidingView, ScrollView, SafeAreaView, Dimensions } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample'


export default function App() {
  const [isVerticalOrientation, setIsVerticalOrientation] = useState(true)
  const [firstInputText, setFirstInputText] = useState('Orientation')
  const [secondInputText, setSecondInputText] = useState('Width')
  const [thirdInputText, setThirdInputText] = useState('Height')

  const checkIfDeviceIsInVerticalOrHorizontalOrientation = () =>{
  const screenWidth = Dimensions.get('window').width
  const screenHeight = Dimensions.get('window').height
    if(screenWidth > screenHeight){
        setIsVerticalOrientation(false)
    }else{
        setIsVerticalOrientation(true)
    }
  }

  return (
    <View onLayout={()=>checkIfDeviceIsInVerticalOrHorizontalOrientation()} style={!isVerticalOrientation ?  styles.containerRow : styles.container}>
       <AssetExample/>
       <View>
        <TextInput value={firstInputText} style=      {styles.inputStyle} onChangeText={(text)=> setFirstInputText(text)}/>
        <TextInput style={styles.inputStyle}  value={secondInputText}/>
        <TextInput style={styles.inputStyle}  value={thirdInputText}/>
    </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ACACAC',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 8,
  },
   containerRow: {
    flex:1,
    flexDirection: 'row',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ACACAC',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 8,
  },
  inputStyle: {
    borderWidth: 1,
    borderColor: 'white',
    width: 200,
    height:50,
    borderRadius: 50,
    paddingLeft:10,
    marginTop:10,
  },
});

Eu verifico no método onLayout 컨테이너 주체, "checkIfDeviceIsInVerticalOrHorizontalOrientation"방법을 사용하여 largura da tela é maior que a sua altura, se for, o dispositivo está na orientação landscape, se não for, o dispositivo está na orientação portrait .
조건은 "isVerticalOrientation"에 대한 부울 값이며 "container"또는 "containerRow"에 대한 레이아웃입니다. Esses dois estilos são os os principais, pois ditam se o layout deve se comportar como landscape ou portrait.


Código completeto do 앱: https://github.com/gabrielsideprojects/awesome-device-orientation
Estou aberto a pull requests e sugestões. Sintam-se confortáveis ​​😃.
유유세이 Snack para criar esse 앱. Se você desejar, você mesmo pode rodar meu snack para vê tudo descrito neste artigo funcionando 🔳.
Vamos beber um cafe, manda um "oi, dev"na rede social que você desejar 😃☕.