Question

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

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

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;

此代码的效果是：-

是否可以对toptab和navbar使用不同的颜色？可以我在问一个愚蠢的问题。道歉，我是新来的本地人。

Answer 1

不要将样式放在navigatorStyle中，只需将所有标签属性添加到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'
});

topTab的tabBarBackgroundColor无法正常工作，会响应本机导航Wix

1 个答案: