React Native自定义TextInput组件输入文本垂直居中异常问题求助

大家好，我最近在React Native项目里碰到个奇怪的问题：我写的自定义TextInput组件，输入的文本怎么都没法垂直居中，但占位符（placeholder）却显示得好好的。之前查了些资料说padding可能是元凶，调整了半天没用；也试着加了textAlignVertical="center"，结果还是白搭。实在没思路了，来这儿求助各位大佬，看看有没有我漏掉的排查方向😭

先把我的组件代码贴出来，方便大家帮忙找问题：

import { View, Text, TextInput, Pressable } from 'react-native';
import type { TextInputProps } from 'react-native';
import { useController, type Control, FieldValues, Path, } from 'react-hook-form';
import { cn } from '@/lib/utils';
import { cva } from 'class-variance-authority';
import { useState, useEffect } from 'react';
import EyeOffIcon from '@/icons/EyeOffIcon';
import EyeIcon from '@/icons/EyeIcon';
import CustomText from '../texts/CustomText';

const inputVariants = cva(
  'placeholder:text-white/40 placeholder:text-base text-base text-white',
  {
    variants: {
      variant: {
        default: '',
      },
      size: {
        default: '',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
);

type CustomTextInputProps<T extends FieldValues> = {
  name: Path<T>;
  control: Control<T>;
  keyboardType?: TextInputProps['keyboardType'];
  placeholder?: string;
  label?: string;
  secureTextEntry?: boolean;
  autoCapitalize?: TextInputProps['autoCapitalize'];
  leftContent?: React.ReactNode;
};

export default function CustomTextInput<T extends FieldValues>({
  name,
  keyboardType,
  placeholder,
  label,
  control,
  secureTextEntry,
  autoCapitalize,
  leftContent,
}: CustomTextInputProps<T>) {
  const [_secureTextEntry, _setSecureTextEntry] = useState<boolean>(false);

  // Replace with useLayoutEffect once expo is upgraded
  useEffect(() => {
    _setSecureTextEntry(!!secureTextEntry);
  }, [secureTextEntry]);

  const {
    field: { value, onChange, onBlur },
    formState: { errors },
  } = useController({ name, control });

  return (
    <View className="flex flex-col w-full gap-1">
      {!!label && (
        <CustomText color="label" type="label">
          {label}
        </CustomText>
      )}
      <View className={cn(
        'bg-white/10 flex flex-row items-center px-8 py-5 rounded-xl',
        errors[name]?.message && 'border border-red-500',
      )}
      >
        {leftContent}
        <TextInput
          value={value}
          onChangeText={(text) => {
            if (keyboardType === 'numeric') {
              const sanitized = text.replace(/[^0-9]/g, '');
              onChange(sanitized === '' ? undefined : Number(sanitized));
            } else {
              onChange(text);
            }
          }}
          onBlur={onBlur}
          keyboardType={keyboardType || 'default'}
          placeholder={placeholder}
          className={cn(inputVariants({}))}
          secureTextEntry={_secureTextEntry}
          autoCapitalize={autoCapitalize}
        />
        {secureTextEntry && (
          <Pressable onPress={() => _setSecureTextEntry((prev) => !prev)}>
            {_secureTextEntry && <EyeOffIcon />}
            {!_secureTextEntry && <EyeIcon />}
          </Pressable>
        )}
      </View>
      {!!errors[name]?.message && (
        <Text className="text-xs text-red-700">
          {errors[name]?.message as string}
        </Text>
      )}
    </View>
  );
}

我自己也试了几个方向，但都没解决：

• 调整过父容器和TextInput的padding值
• 给TextInput加了textAlignVertical="center"属性
• 检查过placeholder的样式，确认没有覆盖文本的垂直对齐设置

有没有大佬能从代码里看出问题，或者给我一些新的排查建议？万分感谢！

内容来源于stack exchange