React-native android 样式化 textInput

Question

有没有办法在 react-native 中设置 textInput 的样式 android？喜欢更改选中时的下划线颜色和光标颜色吗？

Answer 1

下划线颜色可以使用 underlineColorAndroid 属性: https://github.com/facebook/react-native/blob/master/Libraries/Components/TextInput/TextInput.js#L290

参见示例：https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/TextInputExample.android.js#L222

对于光标颜色，目前没有这样的属性公开。如果您想全局更改您应用中所有文本视图的自定义 android 主题，您始终可以为您的应用使用自定义主题（在此处了解更多信息：http://developer.android.com/guide/topics/ui/themes.html）

Answer 2

从 React Native 版本 0.21 开始，仍然无法通过视图道具设置光标颜色的样式。通过向我的应用程序主题添加自定义样式，我成功地设置了光标颜色样式。

您需要将此代码放在 styles.xml 文件中，该文件位于 React 项目的 android 文件夹中，位于 android/app/src/main/res/values/styles.xml.

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- typical material style colors --> 
        <item name="colorPrimary">@color/kio_turquoise</item>
        <item name="colorPrimaryDark">@color/kio_hot_pink</item>

        <!-- sets cursor color -->
        <item name="colorControlActivated">@android:color/black</item>
     </style>
</resources>

请注意，此样式是全局样式，将为您的 React Native 应用中的所有 Android TextInput 视图设置光标颜色。

Answer 3

除了实施@Kio Krofovitch 解决方案外，我还在同一个 ../res/values 文件夹中制作了 color.xml 文件，我在其中写了类似以下内容：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="orange">#ff5500</color>
    <color name="articlecolor">#3399FF</color>
    <color name="article_title">#3399FF</color>
    <color name="cachecolor">#8ad0e8</color>
</resources>

然后相应地编辑 styles.xml 如下：

         ...
        <item name="colorControlActivated">@color/orange</item>
     </style>
</resources>

Answer 4

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

selectionColor（改变光标颜色和选择颜色）

underlineColorAndroid（改变textInput的下划线颜色 Android)

<TextInput
    underlineColorAndroid="#FF0000"
    selectionColor="rgba(0,0,0,0.4)"
/>

这里是 documentation.

React-native android 样式化 textInput

React-native android Styling textInput

javascript

react-native