如何处理不同的屏幕尺寸反应原生？

Question

我正在开发一个关于react-native的应用程序。我已经制作了一个在iPhone 6上正常工作的UI，但在iPhone 5或更低版本上无法正常工作。 我应该如何解决这个问题？

Answer 1

您是否使用固定宽度和高度设计了应用程序？您一定要使用flexbox的功能，尽量避免设置固定大小的设置。可以使用flex property来定义多少空间应该对其他人更具有相关性，并且可以使用该页面上的其他属性以灵活的方式布置元素，以便在各种不同的屏幕尺寸上提供所需的结果。

有时，您可能还需要一个<ScrollView />。

当您确实需要固定尺寸时，您可以使用Dimensions.get('window')。

Answer 2

您需要根据屏幕大小动态计算大小。 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。