如何更改 React Native 光标颜色？

Question

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

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

Answer 1

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

在项目的 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 2

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

<TextInput
  selectionColor={'green'}
/>

这里是 documentation.

Answer 3

如果您希望通过应用保持一致性，最好的方法是将以下代码放入您的根文件 (index.js)

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

/*class....*/

Answer 4

这里很多人建议使用selectionColor:

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

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

在 Android 上，突出显示的文本与光标颜色相同，并且突出显示文本下方的 drop-shaped 指南仍然使用默认颜色；
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"}
 />

Answer 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

如何更改 React Native 光标颜色？

How to change React Native cursor color?

ios

react-native

Android

iOS