React Native - как установить Размер экрана размера экрана независимо?

Question

Я бы хотел, чтобы View выглядел одинаково у разных размеров (для Android 4+) и dpi (240+), а также IPhone 4+ и IPad. Когда я определяю размер, например. 270x65, он выглядит двойным размером на экране с разрешением 640 точек на дюйм, чем тот же размер на экране 320 точек на дюйм (реальный размер экрана 2560x1600).

Это хорошее решение?

containerButton: { 
    width: calcDimension(270), 
    height: calcDimension(65) 
    } 

const calcDimension = size => 
    size/(screenScale() > 2 ? (screenScale()/2) : 1); 

const screenScale =() => 
    (Dimensions.get('window').scale); 

Или может быть лучшее решение? Спасибо.

Answer 1

Я только что рассмотрел ваш запрос, и я думаю, было бы здорово, если вы попытаетесь использовать «размеры». Размеры - еще один важный параметр, который обеспечивается реакцией на себя. Вам нужно просто импортировать измерение в свой компонент.

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

Вышеуказанная команда будет устанавливать высоту и ширину устройства в соответствии с тем, что это iphone или Android.

Просто идите throung ссылки: https://facebook.github.io/react-native/docs/dimensions.html

Ура :)

Answer 2

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

Первый импорт Размеры

import { Dimensions, Platform, StyleSheet } from 'react-native 

высота Получить устройство и ширина

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

Теперь вы можете использовать эту глобальную переменную в ваших стилях. например:

const styles = StylSheet.create({ 
    mainContainer: { 
      height: deviceHeight/2; 
      width: deviceWidth/2; 
    } 
}); 

Вы можете также динамически рассчитать высоту STATUSBAR и ширины стандартным образом:

var STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : 25; 
var HEADER_HEIGHT = Platform.OS === 'ios' ? 44 + STATUS_BAR_HEIGHT : 44 + STATUS_BAR_HEIGHT;