Не может настраиваемая панель вкладок native-base

Question

Я пытаюсь настроить цвета панели вкладок, но цвета не меняются, у меня все еще есть синий цвет по умолчанию на панели вкладок. Я использую 2.1.5 версия native-base,

Я следовал за примерами на V.2.0 документация native-base, используемые свойства, такие как tabBarBackgroundColor либо на <Tabs> или же <Tab> но не получил результатов.

У меня есть этот код:

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>