React Native Responsive屏幕

Question

我有一个关于React Native的屏幕设计的问题。

我正在与世博会建立一个应用程序。它在我的AS Emulator - Nexus 5x上运行。当我拿起我真正的设备三星S9时，页面看起来不一样，比如左右两边的文字都被剪掉了，因为屏幕看起来太小了。然而，这两种设备都有相同的宽度，72毫米和69毫米，但S9是弯曲的。你们如何保持应用程序的响应性？

我已经做了一些componentWillMount检查，如果屏幕太高，我会将字段高度设置得更大。我应该对宽度做同样的处理吗？例如，我是否应该使用react-native-responsive screen包？如果有一些更有经验的RN-Devs，请给我一个关于你如何实际管理这一点的快速提示。

编辑:：下面的代码真的是一个很好的实践吗？这是我的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: row，宽度改为percent。宽度为"30%“的Button是否有响应？那么，它总是占用30%的空间吗？

Answer 1

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

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

我总是先在屏幕上设置一个flex。并相应地设计它的样式。

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

这将给我一个全屏灵活的一开始。这将根据设备的屏幕进行相应的调整。