Question

我正在使用react-native开发一个应用程序。我已经制作了一个在iPhone 6上工作正常但在iPhone 5或更低版本上无法正常工作的用户界面。我该怎么解决这个问题？

Answer 1

您需要根据屏幕尺寸动态计算尺寸。

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')为您提供整个屏幕的高度，这意味着您必须考虑到标签栏已修复 - 高度56。例如，使用TabbarIOS：

时

const WIDTH = Dimensions.get('window').width,
      HEIGHT = Dimensions.get('window').height - 56

然后使用上面的WIDTH和HEIGHT。

Answer 2

您是否使用固定宽度和高度设计了应用程序？你绝对应该使用flexbox的功能，尽量避免设置固定大小的设置。 flex property可用于定义<View />应该使用的空间与其他空间相关的空间，并且该页面上的其他属性可用于以灵活的方式布置元素，从而产生所需的结果在一系列不同的屏幕尺寸上。

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

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

Answer 3

在构建用户界面时，您需要考虑比例。

1，宽度使用percentage(%)，高度使用aspectRatio，反之亦然。

container: {
    width: "100%",
    aspectRatio: 10 / 3, //height will be "30%" of your width
}

2，使用flex作业百分比无法做到。例如，如果列表中有任意大小的项目，并且您希望它们共享相同的大小。使用flex: 1

为每个人分配

3， 使用EStyleSheet中的rem而不是像素。 rem 是一个规模优势。例如，如果您的rem为2，而您的“11rem”将变为“11 * 2”=“22”。如果我们将rem与屏幕尺寸成比例，则您的UI将随任何屏幕尺寸缩放。

//we define rem equals to the entireScreenWidth / 380
const entireScreenWidth = Dimensions.get('window').width;
EStyleSheet.build({$rem: entireScreenWidth / 380});

//how to use rem
container: {
    width: "100%",
    aspectRatio: 10 / 3, //height will be "30%"
    padding: "8rem", //it'll scale depend on the screen sizes.
}

4，使用scrollView查看可能会扩展的内容。例如，TextView

5，每次考虑使用像素时，请考虑在方法3中使用rem。

有关详细说明，请阅读此处的文章。 7 Tips to Develop React Native UIs For All Screen Sizes

如何在本机中处理不同的屏幕尺寸？

3 个答案: