react-native-paper TextInput组件不同安卓设备光标显示异常求助

我使用搭载Android 14的三星S20，测试人员使用搭载Android 11的小米设备，二者均使用react-native-paper的TextInput组件。我的设备上测试一切正常，但测试人员的设备中光标显示异常偏大。

相关代码 #

<Formik
  initialValues={{ userName: userName , password: password }}
  validationSchema={LoginSchema}
  enableReinitialize={true}
  validateOnMount={true}
  onSubmit={async (values) => {
    setLoading(true);
    const response = await requestLogin(values);
    const { notify } = useNotifications();
    if (response) {
      await setToken(response.access_token);
      navigation.navigate(ROUTER.DASHBOARD, { screen: ROUTER.HOME });
      setLoading(false);
    } else {
      setLoading(false);
    }
  }}
>
  {({
    handleChange,
    handleBlur,
    handleSubmit,
    errors,
    touched,
    values,
  }) => (
    <View>
      <Text
        variant="headlineMedium"
        style={{
          color: '#000000',
          alignSelf: 'center',
          marginBottom: 10,
          fontWeight: 600,
        }}
      >
        Đăng nhập
      </Text>
      <TextInput
        mode="outlined"
        outlineColor="#BDBDBD"
        activeOutlineColor="#3699FF"
        textColor="#000000"
        placeholderTextColor={'#BDBDBD'}
        label="Tên đăng nhập"
        onChangeText={handleChange('userName')}
        onBlur={handleBlur('userName')}
        value={values.userName}
        style={{ backgroundColor: '#F6F6F6' }}
      />
      {errors.userName && touched.userName ? (
        <Text style={{ color: 'red' }}>{errors.userName}</Text>
      ) : null}
      <TextInput
        mode="outlined"
        outlineColor="#BDBDBD"
        activeOutlineColor="#3699FF"
        textColor="#000000"
        placeholderTextColor={'#BDBDBD'}
        label="Mật khẩu"
        onChangeText={handleChange('password')}
        onBlur={handleBlur('password')}
        value={values.password}
        secureTextEntry={hide}
        right={
          <TextInput.Icon
            icon={hide ? 'eye-off-outline' : 'eye'}
            onPress={() => setHide(!hide)}
          />
        }
        style={{ backgroundColor: '#F6F6F6' }}
      />
      {errors.password && touched.password ? (
        <Text style={{ color: 'red' }}>{errors.password}</Text>
      ) : null}
      <Button
        mode="contained"
        buttonColor="#3699FF"
        textColor="#FFFFFF"
        onPress={handleSubmit}
      >
        Đăng Nhập
      </Button>
    </View>
  )}
</Formik>

这个问题大概率是Android版本差异+设备UI自定义导致的组件适配问题，React Native Paper在旧Android版本上的光标默认样式逻辑可能和新系统不一致，以下是具体解决办法：

• 显式设置光标高度
  在TextInput组件中添加cursorHeight属性，指定与文本大小匹配的固定高度，比如：

  <TextInput
    // 其他原有属性
    cursorHeight={22} // 根据实际字体大小调整，20-24px区间适配多数场景
  />
  

• 升级依赖版本
  旧版本的react-native-paper可能存在Android 11及以下的适配bug，建议升级到最新稳定版：

  npm install react-native-paper@latest
  # 或使用yarn
  yarn add react-native-paper@latest
  

  升级后确认react-native版本与react-native-paper的兼容性，可参考官方文档的版本匹配说明。

• 显式定义字体大小
  部分旧Android系统会因默认字体大小的差异，导致组件计算光标高度出错，在TextInput的style中显式设置fontSize：

  <TextInput
    // 其他原有属性
    style={{ 
      backgroundColor: '#F6F6F6',
      fontSize: 16 // 明确字体大小，让光标高度自动匹配
    }}
  />
  

• 排查设备系统设置
  部分小米设备允许用户自定义光标大小，让测试人员检查设备设置：设置 -> 显示 -> 字体与显示大小 -> 光标大小（不同MIUI版本路径可能略有差异），确认是否为系统自定义设置导致的异常。

修改后优先在Android 11设备上验证效果，同时确保Android 14设备的显示不受影响。

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