React Native - Native Base Footer不改变颜色答案

【问题标题】：React Native - Native Base Footer not change colorReact Native - Native Base Footer不改变颜色
【发布时间】：2017-05-04 13:57:26
【问题描述】：

代码如下：

 // 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'。而且我什至不知道为什么只有这段代码有效，我什至没有在FooterTab 上设置任何active。

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

有什么办法吗？

【问题讨论】：

你使用的是什么版本的 React Native 和 NativeBase？

标签： android react-native react-native-android native-base

【解决方案1】：

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

【讨论】：

@NijatAliyev 请分享您对上述答案的想法和正确的解决方案。

【解决方案2】：

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

然后重新加载应用程序（小心热重新加载有时不会影响）摇动手机并点击重新加载按钮。

仅此而已。

【讨论】：

【解决方案3】：

您需要在platform.js 中更改tabActiveBgColor 的值而不是commonColor.js

【讨论】：

【解决方案4】：

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

footerDefaultBg 在platform.js中

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

“tabActiveBgColor” 在同一个platform.js中。

【讨论】：

【解决方案5】：

设置FooterTab 的style 属性，如下所示：

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

我还在页脚的style 属性中添加了{ borderTopWidth: 0 }，因为通常在页脚上方有一条细白线。这个问题是在这里问的：

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

【讨论】：

不推荐使用此解决方案。因为 activetabbgColor 不会改变。
对于我显示的代码，我只是从原始问题中逐字复制代码，并将“{borderTopWidth: 0}”添加到“页脚”组件的“样式”道具中.我没有查看“FooterTab”元素的背景颜色，但这是一个好点。感谢您提出这个问题。