3

反応ネイティブの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」の 2 つのセクションが記載されているため、上部の TabBar と下部の TabBar に別の構成を提供することが可能であると思われます。

iOS に「tabBarOptions」を提供し、Android に異なるオプション (上部と下部) を提供することは可能ですか?

4

1 に答える 1

4

以下を使用して、プラットフォームに基づいてオプションを適用できます。

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
于 2017-06-22T16:33:27.753 に答える