1

我正在拼命地更改用于在 NativeBase 元素选项卡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 },
        }
    },

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

在此处输入图像描述

4

1 回答 1

2

只需您可以更改：

<Tabs tabBarUnderlineStyle={{ backgroundColor: "red" }}>
....
</Tabs>
于 2020-03-15T07:52:35.723 回答