Question

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

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系统的显示大小设置如何？仔细研究一下文档，似乎没有一个基本设置。

Answer 1

尝试使用www.npmjs.com/package/react-native-response-dimensions

Answer 2

read this

在文章中，他们使用：react-native-size-matters

当显示大小更改时，如何在React Native中保持视图大小不变？

2 个答案: