如何在react-native-paper的TextInput中对齐文本并隐藏光标

核心问题定位 #

你之前代码里的样式合并写法错误，使用了(styles.custom, style)这种逗号表达式（最终只会取style的值），导致自定义的textAlign: 'center'样式根本没生效。React Native中合并多个样式必须用数组语法[styles.custom, style]。

具体解决方案 #

1. 实现输入内容与占位符居中

修正样式合并方式后，textAlign: 'center'会同时作用于输入内容和占位符，直接满足居中需求。

2. 隐藏光标

有两种简单实现方式：

• 方式一（推荐，RN 0.68+支持）：使用caretHidden属性直接隐藏光标
• 方式二（兼容更低版本）：将cursorColor设为透明色

修正后的完整代码 #

import * as React from 'react';
import {StyleSheet} from 'react-native';
import {TextInput} from 'react-native-paper';
import {useTheme} from 'react-native-paper';

type textInputProps = {
  placeholder: string;
  style?: object;
};

const CustomInput = ({placeholder, style}: textInputProps) => {
  const {colors} = useTheme();

  return (
    <TextInput
      mode="outlined"
      placeholder={placeholder}
      outlineColor={colors.border}
      style={[styles.custom, style]} // 正确的样式合并写法
      theme={{roundness: 30}}
      caretHidden={true} // 隐藏光标
      // 若需兼容RN 0.68以下版本，替换为：cursorColor='transparent'
    />
  );
};

const styles = StyleSheet.create({
  custom: {
    textAlign: 'center',
  },
});

export default CustomInput;

补充说明 #

react-native-paper的TextInput完全继承了原生React Native TextInput的属性和样式能力，不需要额外适配或自定义组件。之前的失效问题纯粹是语法错误导致的，修正后即可正常实现需求。

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