реагировать на собственную высоту ввода на основе высоты мобильного устройства - PullRequest
Новая
       9

реагировать на собственную высоту ввода на основе высоты мобильного устройства

0 голосов
/ 07 мая 2018

В моем родном приложении, когда я запускаю его на 4-дюймовом экране, InputText намного больше, чем 5-дюймовый экран. В чем причина этого? Как я могу избежать этого?

Ответы [ 3 ]

0 голосов
/ 07 мая 2018

Поскольку ваше приложение всегда доступно по умолчанию , а пользовательский интерфейс адаптируется к изменяющемуся размеру экрана , поэтому fontSize изменяется.

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

По умолчанию это true, как упоминалось здесь 

getDefaultProps: function(): Object {
    return {
      allowFontScaling: true,
    };
  },

Чтобы отключить масштабирование шрифта, вы можете установить глобальную настройку как 

Text.defaultProps.allowFontScaling=false

в вашем контейнере высшего уровня.

0 голосов
/ 07 мая 2018

Если вы ищете более точную реализацию уровня ..

Я думаю, вам следует внедрить некоторый механизм масштабирования для обеспечения отзывчивых компонентов 

import { Dimensions, PixelRatio, Platform } from 'react-native'
const { width, height } = Dimensions.get('window')

// Sizes based on Google Nexus 5 on genymotion
const guidelineBaseWidth = 360
const guidelineBaseHeight = 592

const scale = size => width / guidelineBaseWidth * size
const verticalScale = size => height / guidelineBaseHeight * size
const moderateScale = (size, factor = 0.5) => {
  if (Platform.OS === 'ios') {
    factor = PixelRatio.get()
  }

  return size + (scale(size) - size) * factor
}

теперь вы можете вызвать функцию

moderateScale ()

всякий раз, когда вы хотите горизонтальное масштабирование

Вы можете вызвать функцию

verticalScale ()

всякий раз, когда вы хотите вертикальное масштабирование

например: 

{
...
width: moderateScale(200)
height : verticalScale(100)
}

таким образом вы можете обеспечить отзывчивость вашего реагирующего приложения

Счастливого кодирования!

0 голосов
/ 07 мая 2018

Да, в Android огромное разнообразие размеров экрана. Таким образом, мы должны иногда получить размер телефона и назначить вычисленную высоту / ширину, где это необходимо.

В ReactNative мы можем получить размер окна устройства, используя: 

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

https://facebook.github.io/react-native/docs/dimensions.html

Более того, если вы используете свойство flex, вы также можете использовать его для настройки высоты элементов пользовательского интерфейса.

...