Блог

Главная - Вопросы по программированию - Как сохранить абсолютную согласованность осязаемых объектов при различных размерах экрана?

Как сохранить абсолютную согласованность осязаемых объектов при различных размерах экрана?

#javascript #css #reactjs #react-native #react-native-stylesheet

#javascript #css #reactjs #react-native #react-native-таблица стилей

Вопрос:

У меня есть экран с изображением в формате 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 для всех размеров экрана.
Как мне этого добиться?

Ответ №1:

Я думаю, вам следует использовать процент, я не могу сказать правильный процент, но вам нужно попробовать с процентами, тогда, я думаю, мы получим текущую позицию. Я добавляю краткий пример, но вам нужно самостоятельно получить правильный процент. Но я думаю, что это правильный способ.

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

Комментарии:

1. Даже если я укажу правильный процент, круги все еще не совпадают, как ожидалось

2. Да, у меня есть, без соотношения пикселей круги становятся больше на устройствах меньшего размера.

3. В этом случае, я думаю, вам следует использовать тег <Image />, и это метод onLayout, который даст вам правильный размер изображения, а затем вы сможете получить процент, а также вы можете добавить метки как абсолютные, даже вы можете рассчитать размер меток в процентах от ширины высоты изображения.

4. поддержка onLayout также доступна на <ImageBackground />

Ответ №2:

Вы должны устанавливать значения динамически, в зависимости от размера экрана.

Вы можете сделать это с помощью Dimensions API из react native

Реагирующий Собственный API измерений