Question

我使用react-native TabNavigator在我的应用程序中的标签页之间导航。

    const TabNav = TabNavigator({
    Home: {
        screen: HomeScene,
        navigationOptions:{
            tabBar: {
                label: 'Home',
                icon: ({ focused }) => {
                  let imgSource = focused
                  ? require('../common/img/selected-home-75.png')
                  : require('../common/img/unselected-home-75.png');
                  return <Image
                    source={imgSource}
                    style={tabBarStyles.icon}
                  />
                }
            }
        }
    },
    ...
}, {
    swipeEnabled: false,
    tabBarOptions: {
        showIcon: true,
        upperCaseLabel: false,
        labelStyle: tabBarStyles.labelStyle,
        style: tabBarStyles.style
    }
});

每个标签都包含一个图标和一个标签。我想根据应用程序是在iOS还是Android上运行，使TabBar的样式略有不同。

＆{34; tabNavigationConfig的documentation描述了＆＃34; tabBarOptions＆＃34;的两个部分。 for＆＃34; TabBarBottom＆＃34;和＆＃34; TabBarTop＆＃34;这让我觉得可以为顶部TabBar提供配置，为底部TabBar提供另一个配置。

是否可以提供＆＃34; tabBarOptions＆＃34;对于iOS和Android的不同选项（即顶部和底部）？

Answer 1

可以根据平台使用以下选项来应用选项：

import {Platform} from 'react-native';

因此，您可以根据Platform.OS值为每个平台分配单独的选项：

const iosTabBarOptions = {
    showIcon: false,
    upperCaseLabel: false,
    labelStyle: tabBarStyles.labelStyle,
    style: tabBarStyles.style
};

const androidTabBarOptions = {
    showIcon: true,
    upperCaseLabel: true,
    labelStyle: tabBarStyles.labelStyle,
    style: tabBarStyles.style
};

tabBarOptions: Platform.OS === 'ios'
    ? iosTabBarOptions
    : androidTabBarOptions

TabNavigator：基于目标平台的样式选项卡标签

1 个答案: