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

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

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