根据移动高度反应本机输入高度

Question

在我的 React 本机应用程序中，当我运行它在 4 英寸屏幕上时，InputText 比 5 英寸屏幕大得多。这背后的原因是什么？我怎样才能避免它？

Answer 1

是的，Android 中有多种屏幕尺寸。因此，有时我们必须获得 phone 维度，并在需要时分配计算的 height/width。

在 ReactNative 中，我们可以使用以下方法获取设备 window 大小：

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

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

此外，如果您使用 flex 属性，您也可以使用它来调整 UI 元素的高度。

Answer 2

由于您的应用始终默认可访问并且UI会自动适应不断变化的屏幕尺寸，因此， fontSize 变化。

您可以查看文本的 allowFontScaling 属性并决定要保留的布尔值。

默认为true，如前所述here

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

为了禁用字体缩放，您可以将全局设置设置为

Text.defaultProps.allowFontScaling=false

在你的最高级别容器中。

Answer 3

如果您正在寻找更精确的关卡实现..

我认为你应该实现一些缩放机制来提供响应式组件

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

通过这种方式，您可以确保您的 React 应用程序的响应能力

编码愉快！

根据移动高度反应本机输入高度

react native input height based on mobile height

user-interface

platform

react-native