javascript - React Native 响应式屏幕

Question

我对 React Native 中的屏幕设计有疑问。
我正在用 Expo 构建一个应用程序。它在我的 AS 模拟器 - Nexus 5x 上运行。当我拿起我的真实设备 - 三星 S9 时，页面看起来不同，例如左右文本被剪掉，因为屏幕似乎太小了。然而，这两款设备的宽度相同，72 毫米和 69 毫米，但 S9 是弯曲的。你们如何保持您的应用程序响应？
我已经做了一些 componentWillMount 检查，如果屏幕太高，我会使字段高度变大。我应该对宽度做同样的事情吗？或者我应该使用 react-native-responsive-screen 包吗？如果有一些更有经验的 RN-Devs，请给我一个关于你如何实际管理这个的快速提示。
编辑::下面的代码实际上是一个好习惯吗？它是我的样式表，我尝试使用绝对位置 - 在模拟器上看起来不错，但我想这不是一个好习惯。我应该重写样式吗？

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% 的空间吗？

Answer 1

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

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

我希望它有帮助