如何在各种屏幕尺寸上保持 absolute Touchables 一致？

Question

我有一个带有 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>

jointStyleDefaults

const jointStyleDefaults = {
  backgroundColor: '#CC41444B',
  position: 'absolute',
  width: radius * 0.3, // to keep the size of circle responsive across screen size
  height: radius * 0.3,
  borderRadius: radius
};

样式表

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 上将圆形图像保持在固定点。我该如何实现？

Answer 1

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

您可以使用 React native

的 Dimensions API 来完成

React Native Dimensions API

Answer 2

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


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),
  },
});

如何在各种屏幕尺寸上保持 absolute Touchables 一致？

How to keep absolute Touchables consistent across various screen sizes?

javascript

css

reactjs

react-native

react-native-stylesheet