如何在React Native中跨设备一致地放置元素？

Question

我正在构建一个应用程序，其中包含的功能类似于Instagram上的图像标记。用户可以点击图像，然后从列表中选择标签。然后，我将标记和位置保存到Firebase。

这是创建和放置这些标签的主要代码：

// Get the location of a tap

handlePress(evt) {
  this.top = (evt.nativeEvent.locationY * 100) / SCREEN_HEIGHT;
  this.left = (evt.nativeEvent.locationX * 100) / SCREEN_WIDTH;
}

// Create a new View component using the location

tagItem(item) {
    const newView = {
      locationX: this.left,
      locationY: this.top,
      item,
  };

// Add the new tag to a list of tags

    this.setState({
      tagList: this.state.tagList.concat([newView]),
  });

};

是否使用SCREEN_HEIGHT和SCREEN_WIDTH-从React Native中的Dimensions派生-定位元素的最佳方法？

我在模拟器中以及在相同大小的真实设备上都能正常工作。但是，我想确保它可以在多种设备尺寸上使用。

谢谢！

Answer 1

只要每个设备上的图像视图都具有相同的宽高比，这应该是可靠的，因为您实际上是将上下左右的值存储为高度/宽度的百分比。