React Native 响应式屏幕答案

【问题标题】：React Native Responsive ScreenReact Native 响应式屏幕
【发布时间】：2020-06-04 06:44:08
【问题描述】：

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

【问题讨论】：

请提供一些代码

标签： javascript android reactjs react-native

【解决方案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

希望对你有帮助

【讨论】：

嗨，我在某个地方看到过，他们使用了类似 top:width / 10, paddingLeft:width/ 20 之类的响应式应用程序，你能解释一下它的真正作用吗？以及它如何使 UI 响应不同的屏幕，这里的宽度来自您的答案中的维度
嗨亲爱的@ShubhamKumar，这个想法是屏幕总宽度的多少百分比用于您的元素。例如：我的设备宽度为 X px，您的设备宽度为 Y px，当我们说 width*.1（等于 width / 10）时，表示根据用户设备的宽度，我们可以设置元素的样式！跨度>

【解决方案2】：

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

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

这首先会给我一个全屏弯曲。这将根据设备的屏幕进行相应调整。

【讨论】：