React Native — родной базовый нижний колонтитул не меняет цвет

Я решил эту проблему для добавления стиля в FooterTab. Вам не нужно делать какие-либо стили в собственном базовом компоненте Footer. Вот мой исходный код:

     <Footer>
          <FooterTab style={{backgroundColor:"#FFF"}}>
              <Button style={{paddingLeft:0, paddingRight:0}}>
                  <Text}}>iFeeds</Text>
              </Button>
              <Button style={{paddingLeft:0, paddingRight:0}}>
                  <Text}}>iFeeds</Text>
              </Button>
          </FooterTab>
    <Footer>

1) Запустите эту команду из своего терминала после установки нативной базы.

node node_modules/native-base/ejectTheme.js

Когда вы запускаете указанную выше команду, папка с именем native-base-theme копируется в корень вашего проекта. Внутри каталога находятся две папки с именами компонентов и переменных.

2) Оберните код или компонент, к которому вы хотите применить тему, с помощью StyleProvider.

например домашний экран

import React, { Component } from 'react';
import { Container, Content, Text, StyleProvider } from 'native-base';
import getTheme from './native-base-theme/components';
import material from './native-base-theme/variables/material';
import CustomFooter from '../components/CustomFooter';
​export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <StyleProvider style={getTheme(material)}>
        <Container>
          <Content>
            <Text>
              I have changed the text color.
            </Text>
          </Content>
          <CustomFooter screen="Home" navigation={this.props.navigation} />
        </Container>
      </StyleProvider>
    );
  }
}

CustomFooter.js

import React, {Component} from 'react';
import {FooterTab, Footer, Button, Icon} from 'native-base';

export default class CustomFooter extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const navigation = this.props.navigation;
    const activeMenu = this.props.screen;
    return (
      <Footer>
        <FooterTab>
          <Button
            active={activeMenu == 'Home' ? true : false}
            onPress={() => navigation.navigate('Home')}>
            <Icon active={activeMenu == 'Home' ? true : false} name="home" />
          </Button>
          <Button
            active={activeMenu == 'Cart' ? true : false}
            onPress={() => navigation.navigate('Cart')}>
            <Icon active={activeMenu == 'Cart' ? true : false} name="card" />
          </Button>
          <Button
            active={activeMenu == 'Map' ? true : false}
            onPress={() => navigation.navigate('Map')}>
            <Icon active={activeMenu == 'Map' ? true : false} name="map" />
          </Button>
          <Button
            active={activeMenu == 'Profile' ? true : false}
            onPress={() => navigation.navigate('Profile')}>
            <Icon
              active={activeMenu == 'Profile' ? true : false}
              name="person"
            />
          </Button>
          <Button
            active={activeMenu == 'Settings' ? true : false}
            onPress={() => navigation.navigate('Settings')}>
            <Icon
              active={activeMenu == 'Settings' ? true : false}
              name="settings"
            />
          </Button>
        </FooterTab>
      </Footer>
    );
  }
}

3) Теперь измените цвета из папки с собственной базовой темой.

перейдите в /native-base-theme/variables/material.js

найдите tabActiveBgColor и измените значение

  // FooterTab
  tabBarTextColor: '#bfc6ea',
  tabBarTextSize: 11,
  activeTab: '#fff',
  sTabBarActiveTextColor: '#007aff',
  tabBarActiveTextColor: '#fff',
  tabActiveBgColor: 'purple', // for example changed to purple color

Затем перезагрузите приложение (будьте осторожны, горячая перезагрузка иногда не действует), встряхните телефон и нажмите кнопку перезагрузки.

Вот и все.

Подробнее => https://docs.nativebase.io/Customize.html#theaming-nb-headref

Вам нужно изменить значение tabActiveBgColor в platform.js, а не commonColor.js

Если вам нужно изменить цвет фона нижнего колонтитула, измените значение

footerDefaultBg в файле platform.js

Чтобы изменить цвет выбранной кнопки в нижнем колонтитуле или любом другом месте, измените значение

"tabActiveBgColor" на той же платформе.js .

Установите реквизит style для FooterTab следующим образом:

<Footer style={{ borderTopWidth: 0 }} >
    <FooterTab>
        <Button active>
            <Icon active name="food" size={24}  />
            <Text active>Lunch Box</Text>
        </Button>
        <Button>
            <Icon name="coins" size={24} />
            <Text>Point</Text>
        </Button>
        <Button>
            <Icon name="face" size={24} />
            <Text>Profile</Text>
        </Button>
    </FooterTab>
</Footer>

Я также добавил { borderTopWidth: 0 } к реквизиту style нижнего колонтитула, потому что обычно над нижним колонтитулом есть тонкая белая линия. Этот вопрос был задан здесь:

Как удалить нижнюю строку заголовка и верхнюю строку нижнего колонтитула в исходной базе?