Question

以下是代码：

 // Bottom.js
<StyleProvider style={getTheme(commonColor)}>
    <Footer>
        <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>

</StyleProvider>

// commonColor.js

// Footer
footerHeight: 55,
footerDefaultBg: '#ffffff',

// FooterTab
tabBarTextColor: '#FFF',
tabBarTextSize: platform === 'ios' ? 14 : 16,
activeTab: platform === 'ios' ? '#007aff' : '#fff',
sTabBarActiveTextColor: '#007aff',
tabBarActiveTextColor: '#fff',
tabActiveBgColor: platform === 'ios' ? '#1569f4' : '#1569f4',

结果如下：

我已经尝试直接编辑FooterTab.js但根本没有改变。

渲染上可能发生的唯一变化是tabActiveBgColor: platform === 'ios' ? '#1569f4' : '#1569f4'。而且我甚至不知道为什么只有这段代码正常工作，我甚至没有在active上设置任何FooterTab。

当我设置激活按钮并且文本变为白色时，我的期望是什么。

任何解决方案？

Answer 1

我已经解决了在 FooterTab 中添加样式的问题。你不需要在原生基础页脚组件中做任何样式。这是我的源代码 -

     <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>

Answer 2

您需要在tabActiveBgColor而不是platform.js

中更改commonColor.js的值

Answer 3

如果必须更改页脚背景的颜色，请更改

的值 platform.js中的

footerDefaultBg

要在页脚或其他任何位置更改所选按钮的颜色，请更改

的值

“ tabActiveBgColor” 在同一platform.js中。

Answer 4

1）安装本机库后，从终端运行此命令。

node node_modules/native-base/ejectTheme.js

运行上面的命令时，一个名为native-base-theme的文件夹将被复制到您的项目根目录。目录内有两个名为components和变量的文件夹

2）使用StyleProvider包装要向其应用主题的代码或组件

例如HomeScreen

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文件夹更改颜色

转到/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

Answer 5

设置import { createStore, applyMiddleware } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; import createThunkerMiddleware from 'redux-thunker'; import rootReducer from './reducers/index'; const initialState = {}; const thunk = createThunkerMiddleware({ extraArgumentsEnhanced: { fetch, }, }); const middleware = [thunk]; export default createStore( rootReducer, initialState, composeWithDevTools(applyMiddleware(...middleware)) );的{{1}}属性，如下所示：

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>道具中，因为通常在页脚上方有一条细白线。在这里问了这个问题：

How to remove bottom line of Header and top line of Footer in Native Base?

React Native - Native Base Footer不会改变颜色

5 个答案: