主页 / coding / 问题 / 79021642
Accepted
RasyaJusticio
Asked: 2024-09-25 15:40:43 +0800 CST

TextInput 中自定义字体出现不必要的间距

  • 772

我正在使用 Expo 51，在使用 React Native 的 TextInput 时遇到了问题。使用自定义字体时，文本下方似乎有一些不需要的空间。字体本身来自 Expo 的 Google Fonts (Poppins)。

字体本身在Text组件中表现正确。但在 中则不然TextInput。

截屏

我尝试使用textAlignVerticalprop 并将值设置为bottom，但它仍然相同。我期望它看起来像这样（这是使用默认的 fontFamily）。

<RNTextInput
    style={{
        width: 200,
        fontFamily: 'Poppins_400Regular',
        fontSize: 30,
        backgroundColor: "rgb(245 245 245)"
    }}
    textAlignVertical={'bottom'}
    multiline={false}
/>

只是为了澄清一下，RNTextInput这不是一个自定义组件，它只是一个重命名的TextInput组件react-native。

react-native

2 个回答

  1. 在 Android 中，有些字体有自己的填充。将其添加includeFontPadding: false到样式中可以解决此问题。

    • 0
  2. Best Answer

    这可能是与字体指标相关的常见问题。自定义字体可能具有不同的上升和下降值，并且会影响文本在 TextInput 等组件内的垂直对齐方式。

    我首先尝试将 lineHeight 设置为等于 fontSize，以确保行高与文本大小相匹配，从而消除多余的间距。

    然后您可以将 paddingVertical 设置为 0：删除任何可能导致额外空间的垂直填充......

    <RNTextInput
  style={{
    width: 200,
    fontFamily: 'Poppins_400Regular',
    fontSize: 30,
    lineHeight: 30, // ->> Match this to your fontSize 
    paddingVertical: 0, // ->> Remove vertical padding
    backgroundColor: 'rgb(245 245 245)',
  }}
  textAlignVertical="center" // ->> You can also try "center" or "top"
  multiline={false}
/>

    您还可以强制通过编程设置 TextInput 的高度以匹配 fontSize。

    style={{
  height: 30, 
  ...
}}

    我认为其他答案中关于 includeFontPadding 的说法只适用于 Android 设备，您可以使用 includeFontPadding 属性来删除字体添加的额外填充。但是，此属性仅适用于 Text 组件，不适用于 TextInput。:(

    您还可以使用不同的字体仔细检查这个问题，看看发生了什么。

    • 0

相关问题