React Native中如何实现TextInput组件内文字的垂直对齐

差异原因 #

• textAlignVertical是安卓端专属属性，iOS 端无法识别该配置，这是双端显示效果不一致的核心原因。

最优实现方案 #

推荐优先使用paddingVertical代替固定height控制输入框高度，文字会在上下内边距之间自然对齐，无需额外适配即可实现双端效果统一。
如果需要自定义对齐位置（比如顶部对齐），可通过Platform.select做分端适配，修正后代码如下：

import React from "react"
import { TextInput, Platform } from "react-native"

export default function Signup() {
    return (
        <TextInput
            style={{
                backgroundColor: 'red',
                // 用paddingVertical替代固定height，适配双端高度
                paddingVertical: 8,
                // 分端配置对齐规则
                ...Platform.select({
                    android: {
                        textAlignVertical: 'top'
                    },
                    ios: {
                        // 按需调整数值即可对齐安卓端的文字位置
                        paddingTop: 0
                    }
                })
            }}
        />
    )
}

注意事项 #

• 若业务必须设置固定height，可分别调整安卓的textAlignVertical属性、iOS的paddingTop/paddingBottom数值，手动校准双端文字位置。
• 调整时可同步匹配fontSize参数，避免文字出现裁切或偏移。

问题现象 #

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