tabBar 背景颜色不适用于顶部选项卡反应原生导航 Wix答案

【问题标题】：tabBarBackgroundColor not workig for topTabs react native navigation WixtabBar 背景颜色不适用于顶部选项卡反应原生导航 Wix
【发布时间】：2018-10-07 16:28:20
【问题描述】：

我正在使用 wix 的 react native navigation 版本 1.1.486。我在用 topTabs 并希望导航栏和点击栏有不同的颜色，但是我传递的属性不起作用。

我在这里分享我的代码：-

import { Navigation } from 'react-native-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import SimpleIcon from 'react-native-vector-icons/SimpleLineIcons';
const startTabs = ()=>{

    Promise.all([
        Icon.getImageSource("md-map",30),
        Icon.getImageSource("ios-share-alt",30),
        SimpleIcon.getImageSource("menu",30,'red'),
        SimpleIcon.getImageSource("question",30,'black')
    ]).then(sources =>{
        Navigation.startSingleScreenApp({
            screen: {
                screen: 'prabhuji.CustomPack', 

                topTabs: [
                    {
                      screenId: 'prabhuji.FlowerTabOne',
                      title:'Tab 1',
                      icon: sources[1],
                    },
                    {
                      screenId: 'prabhuji.FlowerTabTwo',
                      icon: sources[0],
                      title:'Tab 2'
                    }
                ],
                navigatorButtons: {
                    leftButtons:[
                      {
                        icon:sources[2],
                        title:"Menu",
                        id:"SideDrawerToggle"
                      }
                    ],
                    rightButtons:[
                      {
                        icon:sources[3],
                        title:"Help",
                        id:"Help"
                      }
                    ]
                  },

            },
            appStyle: {
                tabBarBackgroundColor: '#0f2362',
                selectedTabFontSize: 12,
              }


        });
    });



}

export default startTabs;

这段代码的效果是：-

有没有办法为 toptabs 和 navbar 使用不同的颜色？可能我在问一个愚蠢的问题。对此道歉，我是新来的。

【问题讨论】：

标签： wix-react-native-navigation

【解决方案1】：

不要把样式放在navigatorStyle里，把所有的tab属性加到appStyle里，你应该把BottomTabs样式加到AppStyle里。

这是一个例子：

  appStyle: {
    tabBarBackgroundColor: '#0f2362',
    tabBarButtonColor: '#ffffff',
    tabBarHideShadow: true,
    tabBarSelectedButtonColor: '#63d7cc',
    tabBarTranslucent: false,
    tabFontFamily: 'Avenir-Medium',  // existing font family name or asset file without extension which can be '.ttf' or '.otf' (searched only if '.ttf' asset not found)
    tabFontSize: 10,
    selectedTabFontSize: 12,
  },

另一种方式 1. 禁用持久样式属性：

  appStyle: {
    keepStyleAcrossPush: false
  }

2。动态设置样式：

this.props.navigator.setStyle({
  navBarBackgroundColor: 'blue'
});

【讨论】：