如何更改React Native光标颜色？

Question

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

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

Answer 1

实际上有一个支持为TextInput执行此操作:selectionColor

<TextInput
  selectionColor={'green'}
/>

这是文档.

Answer 2

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

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

/*class....*/

Answer 3

这里的许多人建议使用selectionColor：

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

从 RN 0.63 开始，该解决方案仍然效率低下，原因至少有两个：

1. 在Android上，高亮文本与光标颜色相同，高亮文本下方的水滴状参考线仍保持默认颜色；
2. 任何嵌入在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];

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

Answer 4

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

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

Answer 5

是的,我们可以通过设置色调来实现.

在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风格实现它的方法.