如何在React Native中设置TextInput选择手柄样式？

针对React 0.73.4 + Expo 50.0.8的环境，selectionColor仅能修改选中文本的背景色，无法直接调整选择手柄（左右拖拽图标）的样式，以下是分平台的可行方案：

Android 端方案 #

Android支持通过自定义Drawable资源修改选择手柄样式，无需脱离Expo Managed Workflow：

1. 在项目assets目录下创建三个Drawable XML文件（分别对应左、右、中间手柄），比如selection_handle_left.xml：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <!-- 设置手柄颜色 -->
    <solid android:color="#FF4081" />
    <!-- 设置手柄大小 -->
    <size android:width="24dp" android:height="24dp" />
</shape>

复制上述内容创建selection_handle_right.xml和selection_handle_middle.xml，按需调整样式。

2. 修改app.json的android配置，关联自定义样式：

{
  "expo": {
    "android": {
      "theme": "@style/CustomTextSelectionTheme",
      "styles": {
        "CustomTextSelectionTheme": {
          "parent": "Theme.AppCompat.Light.NoActionBar",
          "android:textSelectHandleLeft": "@drawable/selection_handle_left",
          "android:textSelectHandleRight": "@drawable/selection_handle_right",
          "android:textSelectHandleMiddle": "@drawable/selection_handle_middle"
        }
      }
    }
  }
}

3. 运行expo prebuild（Managed Workflow需先执行此步骤同步原生配置），再重新构建项目即可生效。

iOS 端方案 #

iOS的选择手柄属于系统级组件，需通过原生代码扩展实现，可通过Expo Config Plugin完成：

1. 在项目根目录创建plugins/modifyTextSelectionHandle.js插件文件：

const { withAppDelegate } = require('@expo/config-plugins');

module.exports = function withCustomTextSelectionHandle(config) {
  return withAppDelegate(config, (config) => {
    if (config.modResults.language === 'objc') {
      // 在AppDelegate.mm头部添加自定义分类代码
      const importSection = '#import "AppDelegate.h"';
      const customCode = `
#import <UIKit/UIKit.h>

@implementation UITextSelectionView (CustomStyle)
- (void)layoutSubviews {
    [super layoutSubviews];
    for (UIView *handle in self.subviews) {
        if (handle.frame.size.width < 20 && handle.frame.size.height < 20) {
            // 修改手柄背景色
            handle.backgroundColor = [UIColor colorWithRed:1.0 green:0.25 blue:0.5 alpha:1.0];
            // 修改手柄圆角
            handle.layer.cornerRadius = 12;
            // 修改手柄大小
            handle.frame = CGRectMake(handle.frame.origin.x, handle.frame.origin.y, 24, 24);
        }
    }
}
@end
      `;
      config.modResults.contents = config.modResults.contents.replace(importSection, `${importSection}\n${customCode}`);
    }
    return config;
  });
};

2. 在app.json中引入该插件：

{
  "expo": {
    "plugins": ["./plugins/modifyTextSelectionHandle.js"]
  }
}

3. 执行expo prebuild同步原生代码，重新构建项目后，iOS的选择手柄样式会按自定义代码生效。

注意事项 #

• 若使用Expo Managed Workflow，所有修改原生配置的操作都需要执行expo prebuild后再构建。
• iOS的自定义代码会全局作用于所有TextInput组件，若需针对单个组件修改，需额外封装原生组件并通过桥接传递样式参数。

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