javascript - 当显示大小发生变化时，如何在 React Native 中保持相同大小的视图？

问题描述

我们的应用程序包括一个屏幕，其中背景中有一个大圆圈，可以改变位置。使用这种风格主要是绝对定位。圆圈更改为使用正确的样式并动画到一些教程文本下方的新位置。

const { height, width } = Dimensions.get('screen')
const circleRadius = isIphoneX() ? height * 0.55 : height * 0.60

export const styles = StyleSheet.create({
  circleMassiveLeft: {
    position: 'absolute',
    backgroundColor: primary,
    width: circleRadius * 2,
    height: circleRadius * 2,
    borderRadius: circleRadius,
    left: -circleRadius + width - 50,
    top: -circleRadius + height / 2
  },
  circleMassiveRight: {
    position: 'absolute',
    backgroundColor: primary,
    width: circleRadius * 2,
    height: circleRadius * 2,
    borderRadius: circleRadius,
    left: -circleRadius + 50,
    top: -circleRadius + height / 2
  }
})

这对于在多个显示尺寸的正确位置显示圆圈非常有效。由于它需要如此精确地定位，因此在这种情况下使用绝对定位似乎是比 flex 更好的解决方案。我们面临的挑战是，当将 Android 中的系统设置更改为小显示时，圆圈会变小。当然，这在某种程度上是有道理的，但是这个特定的元素看起来很糟糕，因为当它被调整为更小时屏幕其余部分的布局。曾经在它上面的元素现在正在突出！有没有办法确保无论 Android 系统显示大小设置如何，此元素都以相同的大小显示？浏览文档，似乎没有基本设置。

标签： javascriptandroidreact-nativereact-native-android

javascript - 当显示大小发生变化时，如何在 React Native 中保持相同大小的视图？

问题描述

解决方案

推荐阅读