Question

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

Answer 1

是的，Android中有各种各样的屏幕尺寸。因此，我们必须有时获得电话维度，并在需要时分配计算的高度/宽度。

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

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

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

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

Answer 2

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

您可以查看文本的allowFontScaling道具并确定要保留的布尔值。

默认情况下，如here

所述true

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

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

快乐的编码！

根据移动高度反应原生输入高度

3 个答案: