无法自定义标签栏本机基础

Question

我正在尝试自定义标签栏的颜色，但颜色没有改变，我的标签栏上仍然是默认的蓝色。我正在使用 2.1.5 版本的 native-base。

我遵循了 V.2.0 native-base 文档中的示例，在 <Tabs> 或 <Tab> 上使用了 tabBarBackgroundColor 等属性，但没有得到任何结果。

我有这个代码：

import React, { Component } from 'react';
import { Container, Content, Tab, Tabs, Header, TabHeading, Icon, Text } from 'native-base';
import PageTwo from '../pages/PageTwo';

export default class PageThree extends Component {
    render() {
        return (
            <Container>
              <Header hasTabs/>
              <Tabs
               textStyle='#ED9D19'
               tabBarUnderlineStyle='#ED9D19'
               tabBarIconContainerStyle='#ED9D19'
               tabBarBackgroundColor='white'>
                  <Tab
                  tabBarBackgroundColor={{backgroundColor : '#ED9D19'}}
                   heading={ <TabHeading><Icon name="camera" /><Text>Camera</Text></TabHeading>}>
                    <PageTwo/>
                  </Tab>
                  <Tab heading={ <TabHeading><Text>No Icon</Text></TabHeading>}>

                  </Tab>
                  <Tab heading={ <TabHeading><Icon name="apps" /></TabHeading>}>

                  </Tab>
              </Tabs>
            </Container>
        );
    }
}

如您所见，我尝试使用不同的属性，但似乎没有一个起作用，除了 tabBarPosition 可以。

Answer 1

我按照文档中的建议通过使用主题文件解决了我的问题，这是我的代码：

import React, { Component } from 'react';
import { Container, Content, Tab, Tabs, Header, TabHeading, Icon, Text, StyleProvider } from 'native-base';
import PageTwo from '../pages/PageTwo';
import getTheme from '../native-base-theme/components';
import commonColor from '../native-base-theme/variables/commonColor';

export default class PageThree extends Component {
    render() {
        return (
          <StyleProvider style={getTheme(commonColor)}>
            <Container>
              <Header hasTabs/>
              <Tabs>
                  <Tab heading={ <TabHeading><Icon name="camera" /><Text>Camera</Text></TabHeading>}>
                    <PageTwo/>
                  </Tab>
                  <Tab heading={ <TabHeading><Text>No Icon</Text></TabHeading>}>

                  </Tab>
                  <Tab heading={ <TabHeading><Icon name="apps" /></TabHeading>}>

                  </Tab>
              </Tabs>
            </Container>
          </StyleProvider>
        );
    }
}

现在，我只需更改我需要的 commonColor.js 文件中的值。

但是，我仍然不明白为什么我不能直接在我的代码中更改属性...

Answer 2

我试过了，它对我有用，我已经将 backgroundColor 添加到 TabHeading style={{backgroundColor : '#1B2443'}}

<Tab heading={<TabHeading style={{backgroundColor : '#1B2443'}}>
    <Text style={styles.textColor}>PRIVATE KEY</Text></TabHeading>}>
    <Text>Change tab color</Text>
</Tab>

无法自定义标签栏本机基础

Can't custom Tab bar native-base

native-base