Question

大家好，我对React Native中的屏幕设计有疑问。

我正在使用Expo构建一个应用程序。它可以在我的AS模拟器-Nexus 5x上运行。当我使用真实的设备-Samsung S9时，页面看起来会有所不同，例如，由于屏幕似乎很小，因此左右两边的文本被切掉了。但是，两个设备的宽度大致相同，分别为72mm和69mm，但S9是弯曲的。你们如何保持应用程序的响应速度？

我已经做了一些componentWillMount检查，如果屏幕过高，我会在哪里使字段高度变大。我应该对宽度做同样的事情吗？还是应该使用例如react-native-active-screen软件包？如果有一些经验更丰富的RN-Dev，请给我一个有关如何实际管理的快速提示。

编辑::下面的代码实际上是一种好习惯吗？它是我的StyleSheet，我尝试使用绝对位置-在模拟器上看起来不错，但我认为这不是好习惯。我应该重写样式吗？

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center"
  },

  headerText: {
    fontSize: 30,
    color: "black"
  },
  DateContainer: {
    marginTop: 10,
    marginBottom: 10
  },
  DateText: {
    position: "absolute",
    fontSize: 16,
    color: "black",
    top: 14,
    left: -100
  },
  phaseButton: {
    position: "absolute",
    top: -42,
    right: -95,
    height: 30,
    backgroundColor: "#a51717",
    borderRadius: 45
  },
  checkbox: {
    position: "absolute",
    top: -5,
    right: -180,
    height: 30
  },
  ZeitText: {
    position: "absolute",
    fontSize: 16,
    color: "black",
    top: 12,
    left: -199.5
  },
  ZeitInput: {
    position: "absolute",
    left: -150,
    top: 8,
    width: 100,
    height: 35,
    borderWidth: 1,
    textAlign: "center"
  },
  checkText: {
    position: "absolute",
    top: 12,
    right: -115,
    height: 30,
    color: "black"
  },
  button1: {
    position: "absolute",
    left: -120,
    top: 8,
    height: 30,
    marginHorizontal: 20,
    backgroundColor: "#a51717"
  },
  button2: {
    position: "absolute",
    left: -60,
    top: 8,
    height: 30,
    backgroundColor: "#a51717"
  }
});

Edit2.0：我将绝对位置更改为flexDirection：行，宽度更改为百分比。宽度为“ 30％”的按钮是否响应？那么是否总是要占用那里30％的空间？

〜Ty褪色。

Answer 1

您可以使用多种方法来创建响应式应用程序，最常见的一种，我认为最好的一种，就是根据设备的宽度和高度给出样式值。您可以轻松地从Dimensions导入react-native并根据运行该应用程序的设备的width和height属性进行样式设置！例如

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

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center",
    marginLeft:width*.01
  },})

以此类推，有关更多信息，我建议您阅读https://reactnative.dev/docs/dimensions

我希望对您有帮助

Answer 2

我总是先在屏幕上设置柔韧性。并相应地设置样式。

<View style={{flex: 1}}>
  <View>
    "Any styling here"
  </View>
</View>

首先，这会给我全屏显示的灵活性。这将根据设备的屏幕进行相应调整。

反应本机响应屏幕

2 个答案: