Как узнать правильное левое и правое поля содержимого в React Native для нескольких устройств?

Проблема:

Я создаю небольшое приложение для iPhone с помощью React Native v 0.61 Мой контент следует общей линии слева и справа с полями 25px, что очень хорошо выглядит на больших iPhone (iPhone X+), но при просмотре на Iphone SE это выглядит не так. слишком хорошо. Слишком большая маржа. Как узнать идеальную маржу на устройство?

В основном я думаю о том, чтобы выровнять крайний левый контент с «текущим временем» в строке состояния, а крайний правый контент — с тем же полем, что и левый

Что-то такое:

введите здесь описание изображения


react-native react-native-stylesheet
person GeraltDieSocke    schedule 26.09.2019    source источник

Ответы (3)


arrow_upward
1
arrow_downward

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

import { Dimensions } from 'react-native'

var deviceWidth = Dimensions.get('window').width
var deviceHeight: Dimensions.get('window').height

Посмотреть код

View style={styles.viewStyle}>

 </View>

 const styles=StyleSheet.create({
  ViewStyle:{      
  marginTop: deviceHeight * 0.05, // 5 percentage of the screen height
  marginBottom: deviceHeight * 0.05 ,
  marginLeft: deviceWidth * 0.05, , // 5 percentage of the screen width
  marginRight: deviceWidth * 0.05, 
  },
})

Справочные ссылки

Ссылка на параметры

взгляните также на эту ссылку PixelRatio

Шпаргалка по стилю React Native

person Rizwan Ahmed Shivalli    schedule 30.09.2019
comment
У меня аналогичная проблема: stackoverflow.com/questions/66243736/, но все равно это не работает, какие-нибудь идеи? - person RowanX; 18.02.2021

arrow_upward
0
arrow_downward

Вы можете легко добиться этого с помощью компонента SafeAreaView, его цель — отображать содержимое в границах безопасной зоны устройства iOS (версия 11 или выше).

SafeAreaView визуализирует вложенное содержимое и автоматически применяет отступы, чтобы отразить часть представления, которая не покрыта панелями навигации, панелями вкладок, панелями инструментов и другими представлениями-предками. Более того, и это самое главное, отступы безопасной зоны отражают физические ограничения экрана, такие как закругленные углы или выемки камеры (например, область корпуса датчика на iPhone X).

person Jurrian    schedule 30.09.2019

arrow_upward
0
arrow_downward

Я использовал эту небольшую служебную библиотеку react-native-size-matters.

Лучшее в этой библиотеке то, что вы можете изменять масштаб в зависимости от того, насколько размер может увеличиваться с устройством. Единственное, что немного проблематично, это установка базового устройства, с которого производятся измерения. Я клонировал репо и изменил в соответствии со своими потребностями .Проверьте это!

person Thakur Karthik    schedule 30.09.2019