Javascript 如何在不同的屏幕尺寸上保持绝对可触摸性的一致性？

我有一个带有png图像的屏幕，我正在尝试在关节上添加可触摸的东西。我想让触摸屏在屏幕大小上保持一致

这是我的密码

import { 
  Platform,
  ImageBackground,
  View,
  StyleSheet,
  TouchableOpacity,
  Dimensions,
  PixelRatio
} from 'react-native';

const { width, height } = Dimensions.get('window');
const radius = PixelRatio.roundToNearestPixel(width / 2);
const getWidthPercent = (percent) => (width * percent) / 100;
const getHeightPercent = (percent) => (height * percent) / 100;


<View style={styles.container}>
   <ImageBackground
       style={styles.image}
       resizeMode="contain"
       source={require('../../assets/skeleton-large.png')}>       
        <TouchableOpacity style={styles.leftShoulder}></TouchableOpacity>
        <TouchableOpacity style={styles.rightShoulder}></TouchableOpacity>
           
  </ImageBackground>
</View>

样式表

const styles = StyleSheet.create({
  container: {
    flex: 1,   
  },
  image: {
    flex: 1
  },
  leftShoulder: {
    ...jointStyleDefaults,
    top: getHeightPercent(13),
    bottom: 0,
    right: 0,
    left:  getWidthPercent(25) 
  },
  rightShoulder: {
    ...jointStyleDefaults,
    top: getHeightPercent(13),
    bottom: 0,
    right: 0,
   left:  getWidthPercent(60) 
  },  
});

我想在png上的屏幕大小上保持固定点的圆形图像。

---

如何实现这一点？

您应该根据屏幕大小动态设置值

您可以使用react native的Dimensions API来实现

---

您应该根据屏幕大小动态设置值

您可以使用react native的Dimensions API来实现

---

我认为你应该使用百分比，我不能说正确的百分比，但你需要尝试使用百分比，然后我认为我们将获得当前位置。我添加了一个快速示例，但您需要自己检索正确的百分比。但我认为这是正确的方法

const { width, height } = Dimensions.get('window');

const getWidthPercent = percent => width * percent / 100;

// I think you need to subtract ActionBar (Top title bar) and bottom tab bar height from the height then calculate percentage for more accuracy.
const getHeightPercent = percent => height * percent / 100;

const styles = StyleSheet.create({
  container: {
    flex: 1,   
  },
  image: {
    flex: 1,
  },
  leftShoulder: {
    ...jointStyleDefaults,
    top: getHeightPercent(30),
    bottom: 0,
    right: 0,
    left: getWidthPercent(5),
  },
  rightShoulder: {
    ...jointStyleDefaults,
    top: getHeightPercent(30),
    bottom: 0,
    right: 0,
    left: getWidthPercent(85),
  },
});

---

我认为你应该使用百分比，我不能说正确的百分比，但你需要尝试使用百分比，然后我认为我们会得到当前的位置。我添加了一个快速示例，但您需要自己检索正确的百分比。但我认为这是正确的方法

const { width, height } = Dimensions.get('window');

const getWidthPercent = percent => width * percent / 100;

// I think you need to subtract ActionBar (Top title bar) and bottom tab bar height from the height then calculate percentage for more accuracy.
const getHeightPercent = percent => height * percent / 100;

const styles = StyleSheet.create({
  container: {
    flex: 1,   
  },
  image: {
    flex: 1,
  },
  leftShoulder: {
    ...jointStyleDefaults,
    top: getHeightPercent(30),
    bottom: 0,
    right: 0,
    left: getWidthPercent(5),
  },
  rightShoulder: {
    ...jointStyleDefaults,
    top: getHeightPercent(30),
    bottom: 0,
    right: 0,
    left: getWidthPercent(85),
  },
});

---

即使我给出了正确的百分比，圆圈仍然不符合预期是的，如果没有像素比率，圆圈在较小的设备上会变大。在这种情况下，我认为你应该使用tag和它的onLayout方法，它将为你提供正确的图像大小，然后你可以检索百分比，你也可以添加绝对标记，即使你可以通过图像高度宽度的百分比计算标记大小。onLayout道具也是上可用，即使我给出了正确的百分比，圆圈仍不符合预期是的，如果没有像素比率，圆圈在较小的设备上会变大。在这种情况下，我认为你应该使用tag和它的onLayout方法，它将为你提供正确的图像大小，然后你可以检索百分比，你也可以添加绝对标记，即使你可以通过图像高度宽度的百分比计算标记大小。onLayout道具也是可于