5

这是代码：

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

我期望的是当我将按钮设置为活动并且文本变为白色时。

任何解决方案？

4

5 回答 5

12

我已经解决了在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>

我的输出是

于 2018-01-18T13:00:43.263 回答
1

1) 安装 native-base 后从终端运行此命令。

node node_modules/native-base/ejectTheme.js

当您运行上述命令时，名为 native-base-theme 的文件夹将被复制到您的项目根目录。目录内有两个文件夹，分别命名为 components 和 variables

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

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

于 2020-06-14T11:55:45.050 回答
0

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

platform.js中的footerDefaultBg

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

同一 platform.js 中的“tabActiveBgColor” 。

于 2018-11-20T18:53:21.867 回答
0

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

如何在 Native Base 中删除 Header 的底线和 Footer 的顶线？

于 2020-06-17T02:05:02.557 回答
0

您需要更改tabActiveBgColorin platform.jsnot的值commonColor.js

于 2017-06-01T14:44:47.610 回答