如何定位 View absolute react native

在 React Native 中，通过设置样式属性 position: "absolute" 可以使一个 View 元素的位置相对于其父元素做绝对定位。在定位过程中，可以使用 top, bottom, left, right 属性来进一步指定元素的位置。

<View style={{
  position: "absolute",
  top: 20,
  left: 20,
  width: 100,
  height: 100,
  backgroundColor: "red"
}} />

1. 绝对定位

绝对定位元素的位置是基于其最接近的已定位父元素而非文档的定位的。如果不存在已定位的父元素，则最终位置取决于初始包含块的位置 - 对于大多数情况，将是页面左上角。

2. Relative 定位

让我们首先看看相对定位。 如果设置一个元素 position 为relative，那么它会相对于它在正常流中的位置移动

<View style={{
  position: "relative",
  top: 20,
  left: 20,
  width: 100,
  height: 100,
  backgroundColor: "red"
}} />

3. 自定义包含块

在 React Native 中，可以使用 transform 属性来创建一个新的包含块。使用 transform: [{ translateX: -50 }, { translateY: -50 }] 可以将该块向左移动 50%，向上移动 50%。这样，就可以让该元素相对于该包含块而非基于文档的定位。

<View style={{
  transform: [{ translateX: -50 }, { translateY: -50 }],
  backgroundColor: "red",
  width: 100,
  height: 100,
  position: "absolute",
  top: "50%",
  left: "50%"
}}>

4. App 如何使用绝对定位

在 App 中，可以使用绝对定位实现元素的居中。

<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
  <View style={{
      position: "absolute",
      top: "50%",
      left: "50%",
      transform: [{ translateX: -50 }, { translateY: -50 }],
      width: 100,
      height: 100,
      backgroundColor: "red"
  }} />
</View>

5. 总结

在 React Native 中，可以使用 position: "absolute" 属性实现元素的绝对定位。在定位过程中，可以使用 top, bottom, left, right 属性来进一步指定元素的位置。使用 transform 属性可以创建一个新的包含块。