如何更改 Native Base Tab 的下划线颜色答案

【问题标题】：How to change the underlining color of the Native Base Tab如何更改 Native Base Tab 的下划线颜色
【发布时间】：2020-01-23 13:08:42
【问题描述】：

我正在拼命地更改用于在 NativeBase 元素 Tab https://docs.nativebase.io/Components.html#tabs-def-headref 中为选定选项卡下划线的颜色。到目前为止，我已经能够将所选元素的文本颜色更改为红色，但对于下属的蓝色条似乎没有办法。

这里是 Vue 原生模板，它可以使用每个 react native 元素。

<template>
<nb-container :style="{flex:1, backgroundColor: '#fff'}">
    <header v-bind:title="title" ></header>
    <nb-tabs>
      <nb-tab :heading="heading1" :textStyle="textStyle" :activeTextStyle="activeTextStyle" :tabStyle="tabStyle" :activeTabStyle="activeTabStyle">
            <actualitesVue  v-bind:navigation= "navigation" > </actualitesVue>
        </nb-tab>
        <nb-tab heading="Dossiers" :textStyle="textStyle" :activeTextStyle="activeTextStyle" :tabStyle="tabStyle" :activeTabStyle="activeTabStyle">
            <dossiersVue  v-bind:navigation= "navigation" > </dossiersVue>
        </nb-tab>
    </nb-tabs>
</nb-container>

这是道具

data: function () {
        return {
          heading1: "Actualités",
          title : "INFOS",
          tabStyle : {backgroundColor: "white"},
          activeTabStyle : {backgroundColor: "white"},
          textStyle : {color: "rgba(189,40,26,0.6)"},
          activeTextStyle : {color : "rgba(189,40,26,1)", fontSize: 20 },
        }
    },

结果也接近于此。我的观点是关于蓝线：

【问题讨论】：

标签： react-native vue-native

【解决方案1】：

你可以简单地改变：

<Tabs tabBarUnderlineStyle={{ backgroundColor: "red" }}>
....
</Tabs>

【讨论】：