如何在页面的特定坐标处呈现视图

Question

当触摸屏幕并保持在某个位置时，我想在触摸屏幕的位置呈现一个View(就像 android 中的上下文菜单(。我有页面坐标pageX和pageY，我想根据这些坐标渲染一个View。

有没有办法在 Style 对象中给出这些坐标，如下所示，

<View style={{X: 120, Y: 75}} />

Answer 1

与常规 CSS 不同，react-native 不支持position: fixed相对于视口手动将视图定位在某个位置。但是，您可以将解决方法与父组件的position: 'absolute'和onLayout方法一起使用。我将尝试澄清：

第 1 步：

假设您有一个父视图，它正好是屏幕的宽度和高度，那么您可以像这样轻松定位视图：

<View> // this parent view has the same dimensions as the screen
  // Below is the view you want to position according your x, y coordinates
  <View 
    style={{
      position: 'absolute',
      left: this.state.x,
      top: this.state.y
    }}>
  </View>
</View>

步骤 2(可选(：

您拥有的触摸坐标是屏幕坐标，因此，如果您的视图与屏幕大小不完全相同，则步骤 1 是不够的。但是 react-native 提供了一个measureInWindow()(可通过组件的 ref 获得(回调来确定组件的屏幕坐标。

因此，基本上，每当发生触摸时，您都会在父视图上调用measureInWindow()以确定父窗口的 x 和 y 偏移量，并考虑此偏移量以计算正确的 x 和 y 值。

Answer 2

使用 DOM 组件方法getBoundingClientRect()您可以获取有关对象几何形状和位置的信息。然后，使用currentTranslate对象属性，您可以将其转换为所需的位置。

例如，假设您在位置 (100， 100( 有一个按钮，并且想要将其移动到 (300， 300(。使用第一种方法，您将获得实际位置，使用 currentTranslate(200， 200(，您可以将其移动到 (300， 300(，如下所示： element.currentTranslate = {x: 200, y: 200}

也许有更好的方法，但我知道这种方法:D

我希望它有所帮助