React-native android Styling textInput

Question

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

Answer 1

从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 2

对于下划线颜色，您可以使用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 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（用于更改Android中textInput的下划线颜色）

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

这是文档 。