React Native for macOS：移除Native Base Input组件聚焦蓝色方形轮廓

方法一：通过Native Base自定义聚焦样式 #

Native Base的Input组件支持通过_focus属性定义聚焦状态下的样式，直接覆盖默认的轮廓样式即可：

修改你的SearchBar组件代码，为Input添加_focus属性：

import React from 'react';
import {Icon, Input} from 'native-base';
import Ionicons from 'react-native-vector-icons/Ionicons';

const SearchBar = () => {
  return (
    <Input
      variant="rounded"
      size="xs"
      InputLeftElement={
        <Icon
          as={<Ionicons name="ios-search" />}
          size={5}
          ml="2"
          color="muted.400"
        />
      }
      placeholder="Search"
      // 自定义聚焦状态样式，移除蓝色轮廓
      _focus={{
        outlineWidth: 0,
        outlineColor: 'transparent',
        // 若存在默认边框，可额外设置borderColor避免残留边框变化
        borderColor: 'transparent'
      }}
    />
  );
};

export default SearchBar;

原理说明：

• outlineWidth: 0直接关闭聚焦时的轮廓绘制
• outlineColor: 'transparent'作为兼容处理，确保不同环境下都不会显示轮廓
• 若你的Input有默认边框，添加borderColor: 'transparent'可彻底移除聚焦时的边框变化

方法二：React Native for macOS原生层处理（备用） #

如果上述方法不生效，可通过修改macOS原生代码调整NSTextField的聚焦样式：

1. 打开项目的macOS原生目录
2. 找到对应视图的代码文件
3. 将文本框的focusRingType设置为NSFocusRingTypeNone

不过通常方法一已经能解决问题，优先使用Native Base的样式自定义能力。

内容的提问来源于stack exchange，提问作者jerry seigle