react-native - 选项卡导航器 : Style tab label based on target platform

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 进行稍微不同的设置。

documentation对于“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