Android端React Native：TextInput与Text组件高度不一致问题

问题详情 #

底部红色的TextInput和上方绿色的Text组件，字体、字号、字重完全一致，但DevTools检测显示TextInput高度为28dp，Text仅23dp，视觉上前者明显更高。

试过以下操作均无效：

• 把padding、paddingBottom、paddingTop、paddingVertical设为0
• 给Text加下划线，高度没变化

已在最新版React Native CLI和Expo环境中复现该问题。

解决方法 #

1. 强制重置TextInput的平台默认样式 #

React Native的TextInput在iOS和Android上都有内置的默认样式，手动设padding为0不一定能覆盖，需要针对性处理：

<TextInput
  style={{
    padding: 0,
    paddingVertical: 0,
    // Android端：关闭字体自带的额外内边距
    includeFontPadding: false,
    // iOS端：重置内容嵌入偏移
    contentInset: { top: 0, bottom: 0 },
    // 强制行高与Text组件对齐
    lineHeight: 23,
    // 确保字体属性完全匹配Text组件
    fontFamily: '你的字体名称',
    fontSize: 16,
    fontWeight: 'normal',
  }}
/>

2. 用视觉对齐的“假输入框”方案 #

如果上面的方法还是不行，可以用Text做视觉展示，TextInput透明覆盖在上面，实现高度完全一致：

<View style={{ position: 'relative' }}>
  <Text style={{ fontSize: 16, fontWeight: 'normal', color: 'green' }}>测试文本</Text>
  <TextInput
    style={{
      position: 'absolute',
      inset: 0,
      opacity: 0,
      padding: 0,
    }}
    value={inputValue}
    onChangeText={setInputValue}
  />
</View>

3. 排查字体本身的行高差异 #

有些字体本身的基线或行高设置特殊，即使字号相同，渲染高度也会不一样。可以临时换成系统默认字体（比如iOS的San Francisco、Android的Roboto）测试，确认是不是字体的问题。

内容的提问来源于stack exchange，提问作者Amir