如何处理不同的屏幕尺寸反应原生?
问题描述:
我正在开发一个关于react-native的应用程序。我已经制作了一个在iPhone 6上正常工作的UI,但在iPhone 5或更低版本上无法正常工作。 我应该如何解决这个问题?如何处理不同的屏幕尺寸反应原生?
答
您是否使用固定宽度和高度设计了应用程序?您一定要使用flexbox的功能,尽量避免设置固定大小的设置。可以使用flex property来定义多少空间应该对其他人更具有相关性,并且可以使用该页面上的其他属性以灵活的方式布置元素,以便在各种不同的屏幕尺寸上提供所需的结果。
有时,您可能还需要一个<ScrollView />
。
当您确实需要固定尺寸时,您可以使用Dimensions.get('window')
。
答
您需要根据屏幕大小动态计算大小。 56. 因此,例如
import { Dimensions, StyleSheet } from 'react-native'
[...]
const { width, height } = Dimensions.get('window')
[...]
const styles = StyleSheet.create({
container: {
flex: 1.
flexDirection: 'column',
},
myView: {
width: width * 0.8, // 80% of screen's width
height: height * 0.2 // 20% of screen's height
}
})
如果使用TabbarIOS
,记住Dimensions.get('window')
给你整个屏幕的高度,这意味着你将不得不采取在帐户中的TabBar已定高,使用时TabbarIOS
:
const WIDTH = Dimensions.get('window').width,
HEIGHT = Dimensions.get('window').height - 56
然后使用上面的WIDTH和HEIGHT。
这对多个设备不起作用(它实际上并不精确) –
你从哪里见过这个不起作用?它似乎对我很好(至少在Android上) – Philberg