对于topTab，tabBarBackgroundColor不起作用响应本机导航Wix [英] tabBarBackgroundColor not workig for topTabs react native navigation Wix

问题描述

我使用的是wix的react native导航版本1.1.486.我在用 topTab，并希望导航栏和Tapbar使用不同的颜色，但是 我通过的属性无法正常工作.

I am using react native navigation version 1.1.486 by wix. I am using topTabs and want different colors for navbar and tapbar, but the properties I a passing is not working.

我在这里共享我的代码:-

I am sharing my code here:-

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;

此代码的效果是:-

The effect for this code is:-

有什么方法可以对toptab和navbar使用不同的颜色吗?可能 我在问一个愚蠢的问题.道歉，我是新来的本地人.

Is there any way to use different colors for toptabs and navbar? May be I am asking a silly question. Apology for that, I am new to react native.

推荐答案

不要将样式放在navigatorStyle中，只需将所有选项卡属性添加到appStyle，则应将BottomTabs样式添加到AppStyle.

Don't put the styles in navigatorStyle, just add all tab properties to appStyle , you should add BottomTabs styles to AppStyle.

这是一个例子:

Here's an example :

  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.禁用持久样式属性:

Another way 1. Disabling persistent styling properties :

  appStyle: {
    keepStyleAcrossPush: false
  }

2.动态设置样式:

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

这篇关于对于topTab，tabBarBackgroundColor不起作用响应本机导航Wix的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！