Warm tip: This article is reproduced from stackoverflow.com, please click
react-native responsive-design

How to handle responsive layout in React Native

发布于 2020-03-27 15:43:34

I'm using the react-native-dimension library for making my UI responsive as follows:

const{width,height} = Dimensions.get('window');

and in my style.js file :

imageBackgroundLandscape:{
    width:height,
    height:width

},
imageBackgroundPortrait:{
    width:width,
    height:height
}

The problem is that when I rotate the screen, the width and height variables have got previous values! For example in the portrait mode my variables are:

width : 800
height: 1280

and when I rotate the screen my variables are:

width : 800 // previous value
height: 1280 // previous value

In addition, I use the react-native-orientation to determine the mode of the screen. I want to know how can I change the values of them (width, height) automatically when I rotate the device, or are there any other libraries for this?

Thanks in advance.

Questioner
alirezafc
Viewed
102
分享
Suraj Malviya 2018-11-25 17:10

I usually handle the height, width confusion with the following code:

//Dimensions.js
import {Dimensions} from 'react-native';
const {height, width} = Dimensions.get('window');

const actualDimensions =  {
  height:  (height<width) ? width : height,
  width: (width>height) ? height : width
};

export default actualDimensions;

Instead of requiring the height and width from Dimensions, use the actualDimensions and for managing the orientation gracefully you should give a try to this library as well.

The Dimensions are loaded before the JS bundle gets loaded into the app so it is recommended to fetch the height, width dynamically for every render You can read this here

Rami Salim 2019-12-02 11:10:47

Dimensions.get('window').height sometimes returns the wrong value

Suraj Malviya 2019-12-05 23:47:47

@RamiSalim Can you please specify clearly about the wrong that you encountered. ?

Related issues

1
React Native Modal Positioning
2
How to execute a sort after loading in data into an array in UseEffect
3
how to show multiple selected item from list in react native
4
How can I upgrade react-native gradle version
5
Node JS Module Not Working . Module Not Found
6
Rendering specific component in React Native
7
React native javascript merge multi theme parameters
8
Firebase throws ERROR FirebaseApp name [DEFAULT] already exists
9
React Native Navigation Issue giving error after splash screen
10
secureTextEntry Disable IOS 13+ Strong Password behavior