React Native iOS端文本选中时如何去除侧边线？

针对你遇到的iOS端TextInput侧边线无法通过组件属性去除的问题，可以尝试以下几种方案：

• 清除边框相关样式：给TextInput添加样式，彻底清除边框和阴影效果：

  <TextInput
    style={{
      borderWidth: 0,
      borderColor: 'transparent',
      shadowColor: 'transparent',
      shadowOffset: { width: 0, height: 0 },
      shadowOpacity: 0,
      shadowRadius: 0,
      elevation: 0,
    }}
    // 其他业务属性
  />
  

  同时要检查父容器的样式，避免父组件的边框或阴影造成视觉混淆。

• 适配第三方UI库：如果使用了react-native-paper这类第三方UI组件库，需对应设置边框隐藏属性。比如react-native-paper的TextInput可设置mode="flat"，再配合style={{borderWidth:0}}来去除边框。

• 原生层修改（终极方案）：若纯JS方案无效，可通过自定义原生组件解决。在iOS端创建自定义TextInput管理器，设置原生输入框的边框样式为无：

  #import <React/RCTViewManager.h>
  
  @interface CustomTextInputManager : RCTViewManager
  @end
  
  @implementation CustomTextInputManager
  
  RCT_EXPORT_MODULE()
  
  - (UIView *)view {
    UITextField *textField = [[UITextField alloc] init];
    textField.borderStyle = UITextBorderStyleNone;
    return textField;
  }
  
  @end
  

  之后在React Native中导入该自定义组件使用即可。

内容的提问来源于stack exchange，提问作者Kaushal Lalani