TabNavigator:基于目标平台的样式标签

Question

我正在使用react原生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上运行还是在安卓上运行，我想让TabBar的样式略有不同。

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

有没有可能为iOS提供"tabBarOptions“，为安卓提供不同的选项(即顶部和底部)？

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