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（用于更改textInput的下划线颜色）机器人）

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

这是documentation。

React-native android Styling textInput

4 个答案: