如何更改本机基本选项卡的下划线颜色

Question

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

这是Vue本机模板，可以使用每个react本机元素。

<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 },
        }
    },

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

Answer 1

只需更改即可：

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