1

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

图片

这是我的代码

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

4

2 回答 2

0

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


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),
  },
});
于 2020-08-20T09:40:24.653 回答
0

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

您可以使用本机反应的Dimensions API来做到这一点

反应原生维度 API

于 2020-08-20T09:03:19.437 回答