React Native Paper TextInput组件多余轮廓移除方法咨询

针对你遇到的TextInput未聚焦时显示多余轮廓、激活后消失的问题，可以通过以下几种方法解决：

• 显式设置type="flat"：React Native Paper的TextInput默认可能带有基础边框样式，设置为flat类型会禁用默认的轮廓/边框
• 在style中添加outlineWidth: 0：部分情况下默认的轮廓是通过outline属性而非border控制的，直接设置该属性可以移除
• 自定义theme覆盖未聚焦状态的边框：如果上述方法无效，可以在theme里修改TextInput的默认边框样式

修改后的代码示例：

render={({field: {onChange, onBlur, value}}) => (
  <TextInput
    keyboardType="decimal-pad"
    autoFocus
    type="flat" // 显式设置为flat类型
    maxLength={10}
    left={element}
    placeholder="Phone Number"
    style={{
      width: s(250),
      height: s(35),
      borderRadius: s(20),
      backgroundColor: theme.colors.white,
      borderWidth: 0,
      outlineWidth: 0, // 添加outlineWidth移除轮廓
    }}
    onBlur={onBlur}
    theme={{
      roundness: s(20),
      colors: {
        // 可选：如果还有残留，覆盖未聚焦状态的边框颜色
        placeholder: theme.colors.placeholder,
      },
    }}
    onChangeText={onChange}
    value={value}
  />
)}

如果还是有问题，可以尝试在theme的TextInput组件样式里直接禁用边框：

theme={{
  roundness: s(20),
  components: {
    TextInput: {
      styles: {
        base: {
          borderWidth: 0,
          outlineWidth: 0,
        },
      },
    },
  },
}}

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