如何更改React Native光标颜色？

Question

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

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

Answer 1

实际上有一个道具为TextInput执行此操作： selectionColor

<TextInput
  selectionColor={'green'}
/>

这是documentation。

Answer 2

实现这一目标的最佳方法，如果你想通过应用程序保持一致性，那么将波纹管代码放在你的根文件中（index.js）

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

/*class....*/

Answer 3

是的，我们可以通过设置色调来实现。

在AppDelegate.m项目中。

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

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

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

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

更改UITextView的色调时没有任何反应。

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

Answer 4

这里很多建议使用selectionColor：

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

从RN 0.63开始，此解决方案仍然无效，原因至少有两个：

1. 在Android上，突出显示的文本具有与光标相同的亮色，并且突出显示的文本下方的水滴形向导仍保留默认颜色；
2. WebView组件中嵌入的任何输入字段或文本区域都将在两个平台上都获得默认的光标颜色。

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

Android

转到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];

最后，重建应用程序以查看编辑结果。

Answer 5

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

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