如何移除@ant-design/react-native Input默认底部边框？

针对你遇到的Input组件默认底部边框无法通过常规borderBottomWidth和borderColor属性移除的问题，可通过以下两种方法解决：

方法一：使用inputStyle属性覆盖内部样式 #

Ant Design React Native的Input组件封装了React Native原生的TextInput，底部边框实际来自内部的TextInput元素。直接通过inputStyle属性设置内部输入框的边框样式即可移除：

<Input 
  placeholder={field.placeholder} 
  inputStyle={{ borderBottomWidth: 0 }} 
/>

方法二：结合平台适配处理 #

针对Android平台，原生TextInput默认带有下划线，可通过underlineColorAndroid属性设置为透明，同时配合inputStyle兼容iOS：

<Input 
  placeholder={field.placeholder} 
  inputStyle={{ borderBottomWidth: 0 }} 
  underlineColorAndroid="transparent"
/>

修改后的代码示例（以text类型字段为例） #

在你的FieldItems组件的text分支中修改Input：

case "text":
  return (
    <Form.Item
      key={index}
      name={field.name}
      rules={field.validations}
      label={field.label}
      required={field.required}
    >
      <Input 
        placeholder={field.placeholder} 
        inputStyle={{ borderBottomWidth: 0 }} 
        underlineColorAndroid="transparent"
      />
    </Form.Item>
  );

number类型的Input也可按相同方式修改。

内容的提问来源于stack exchange，提问作者Manish Stark