react-native - TabNavigator：基于目标平台的样式标签标签

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 的样式略有不同。

“tabNavigationConfig”的文档描述了“TabBarBottom”和“TabBarTop”的“tabBarOptions”的两个部分，这让我认为可以为顶部 TabBar 提供配置，为底部 TabBar 提供另一个配置。

是否可以为 iOS 提供“tabBarOptions”和为 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