无法自定义选项卡栏本机基础

Question

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

我遵循了 native-base 的 V.2.0 文档中的示例，在 <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

我已经尝试过这个并且它对我有用，我已经将背景颜色添加到 TabHeaderstyle={{backgroundColor ： '#1B2443'}}

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

Answer 2

我设法通过引入主题文件来解决我的问题，正如文档中所建议的那样，这是我的代码：

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文件中的值。

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