如何更改 React Native 光标颜色？答案

【问题标题】：How to change React Native cursor color?如何更改 React Native 光标颜色？
【发布时间】：2015-10-13 05:29:35
【问题描述】：

我正在使用 React Native，我想更改文本输入的光标颜色。我实际上得到了默认的蓝色。

如何在 JavaScript 或 AppDelegate 中设置全局颜色？

【问题讨论】：

光标颜色是什么意思？输入上突出显示的颜色？将鼠标悬停在输入上时鼠标光标的颜色？输入字母的文本输入插入符号的颜色？

【解决方案1】：

实际上有一个用于 TextInput 的道具：selectionColor

<TextInput
  selectionColor={'green'}
/>

这里是documentation。

【讨论】：

确实应该是公认的答案。我目前正在尝试避免使用本机代码，而不得不使用本机来更改文本输入的颜色是荒谬的。
当前，当您选择文本时，“selectionColor”将用作背景
它只改变当前 0.63.4 中 iOS 的光标。

【解决方案2】：

如果你想通过应用程序保持一致性，最好的方法是将波纹管代码放在你的根文件（index.js）中

import { TextInput } from 'react-native'
TextInput.defaultProps.selectionColor = 'white'

/*class....*/

【讨论】：

【解决方案3】：

这里很多人建议使用selectionColor:

import {TextInput} from 'react-native';
TextInput.defaultProps.selectionColor = 'red';

截至 RN 0.63，此解决方案仍然效率低下，至少有两个原因：

在 Android 上，突出显示的文本与光标的颜色相同，突出显示文本下方的水滴形参考线仍停留在默认颜色；
WebView 组件中嵌入的任何输入字段或文本区域都将在两个平台上获得默认光标颜色。

因此，更改光标颜色的正确方法是编辑本机设置。

安卓

转到android/app/src/main/res/values/styles.xml 并将以下行添加到自定义部分：

<item name="android:colorControlActivated">#FF0000</item>
<item name="android:textColorHighlight">#FF9999</item>

iOS

转到ios/MyApp/AppDelegate.m 和[self.window makeKeyAndVisible]; 之前添加：

self.window.tintColor = [UIColor colorWithRed:1.0f green:0.0f blue:0.0f alpha:1];

最后，重新构建应用以查看您的编辑结果。

【讨论】：

这是完美的解决方案。当我们可以用两行代码来完成整个应用程序时，为什么还要到处使用 props。

【解决方案4】：

您可以通过根据文档更改选择颜色来更改光标颜色，如下所示，

<Input 
  ...
  selectionColor={"black"}
 />

【讨论】：

【解决方案5】：

是的，我们可以通过设置 tint color 来做到这一点。

在项目的AppDelegate.m 中。

在self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];和[self.window makeKeyAndVisible];之间添加下面的代码，可以改变全局的tint颜色。

self.window.tintColor = [UIColor redColor]; // Here is your color.

或者，在[self.window makeKeyAndVisible];之后添加以下代码，可以改变TextInput/UITextField的色调。

[[UITextField appearance] setTintColor:[UIColor redColor]];

当你改变 UITextView 的 tint 颜色时没有任何反应。

我找不到用 JaveScript 风格实现它的方法。

【讨论】：

如果有人想添加十六进制颜色，您可以使用this site 将十六进制转换为 iOS UIColor。
有谁知道如何在 Android 上做到这一点？
对于 Android，请参阅 stackoverflow.com/questions/32752902/…。在这两个平台上添加对 tintColor 的支持是一个悬而未决的问题：github.com/facebook/react-native/issues/1685。
那个颜色转换器链接失效了，试试这个：touch-code-magazine.com/web-color-to-uicolor-convertor（或者使用stackoverflow.com/questions/1560081/…的宏）
你应该记住 selectionColor 也会改变选择的颜色，而不仅仅是光标！

【解决方案6】：

对于 React Native 0.62 +

import {TextInput } from 'react-native'

TextInput.defaultProps = TextInput.defaultProps || {};
TextInput.defaultProps.selectionColor = 'transparent';

在 App.js 中的 Main 函数调用之前添加这些行

例如：-

..Other code

TextInput.defaultProps = TextInput.defaultProps || {};
TextInput.defaultProps.selectionColor = 'transparent';

const App = () => {

...Other code

【讨论】：