TabNavigator：基於目標平臺的樣式選項卡標籤

我正在使用react-native TabNavigator在我的應用程序中的選項卡之間導航。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描述了兩段‘tabBarOptions’爲‘TabBarBottom’和‘TabBarTop’，這讓我覺得這可能提供了頂級的TabBar和底部的TabBar配置另一個。

是否有可能爲iOS和不同的選擇爲Android「tabBarOptions」（即頂部和底部）

來源

2017-03-28 Nick

有可能基於與使用平臺上的應用選項：

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-22 16:33:27

TabNavigator：基於目標平臺的樣式選項卡標籤

回答

相關問題