React Native Elements Input底部边框圆角匹配问题求助

从截图可见，Input组件的底部原生下划线与自定义边框错位，导致四边样式不一致。以下是针对React Native Elements（RNE）Input组件的有效解决方法：

方法一：利用RNE内置样式属性统一控制边框 #

RNE的Input封装了RN的TextInput，原生TextInput的底部下划线会干扰自定义边框，需先隐藏它，再通过inputContainerStyle设置统一边框：

1. 隐藏原生TextInput下划线：给Input添加underlineColorAndroid="transparent"（适配Android），同时在inputStyle中去掉TextInput自身边框。
2. 通过inputContainerStyle设置统一的四边边框样式，替代直接在inputStyle中设置单边边框。

示例代码：

import { Input } from 'react-native-elements';

// 使用时
<Input
  placeholder="请输入内容"
  underlineColorAndroid="transparent"
  // 内部输入框样式：去掉自身边框，调整内边距
  inputStyle={{
    borderWidth: 0,
    paddingHorizontal: 12,
    paddingVertical: 10,
  }}
  // 输入框容器样式：设置统一边框
  inputContainerStyle={{
    borderWidth: 1,
    borderRadius: 5,
    borderColor: '#cccccc', // 根据需求修改边框颜色
  }}
/>

方法二：自定义外层容器控制边框（更灵活） #

如果RNE内置样式仍有冲突，可直接用RN的View做外层容器，完全自定义边框，内部Input清空所有边框样式：

示例代码：

import { View } from 'react-native';
import { Input } from 'react-native-elements';

<View style={{
  borderWidth: 1,
  borderRadius: 5,
  borderColor: '#cccccc',
  paddingHorizontal: 8,
  marginHorizontal: 16,
}}>
  <Input
    placeholder="请输入内容"
    underlineColorAndroid="transparent"
    // 清空输入框自身边框
    inputStyle={{
      borderWidth: 0,
      backgroundColor: 'transparent',
    }}
    // 清空RNE默认的输入容器边框和内边距
    inputContainerStyle={{
      borderWidth: 0,
      padding: 0,
    }}
  />
</View>

注意事项 #

• 避免给inputStyle或inputContainerStyle设置固定高度，优先用padding调整内边距来控制输入框高度，防止边框错位。
• iOS平台需确保inputStyle中borderWidth设为0，避免原生TextInput的默认边框干扰。

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