反應導航中選擇和未選中狀態的不同tabBar圖標？

Question

我正在設置一個tabbar，使用原生反應導航。我無法爲選定/未選中狀態設置多個標籤欄圖標。任何參考或文檔會有幫助？

Answer 1

您可以根據activeTintColor/inactiveTintColor

static navigationOptions = { 
    tabBarLabel: 'Notifications', 
    tabBarIcon: ({ tintColor }) => (tintColor == '#e91e63' ? 
     <Image 
     source={require('./activeIcon.png')} 
     style={[styles.icon, {tintColor: tintColor}]} 
     /> 
     : 
     <Image 
     source={require('./inactiveIcon.png')} 
     style={[styles.icon, {tintColor: tintColor}]} 
     /> 
    ), 
    tabBarOptions: { 
     activeTintColor: '#e91e63', 
    } 

}; 

即使你不使用着色顏色你可以做這樣的事情改變圖標。

Answer 2

tabBarIcon回調爲您提供集中變量爲相同。

static navigationOptions = { 
    tabBarLabel: 'Home', 
    tabBarIcon: ({ focused }) => { 
     const image = focused 
     ? require('../active.png') 
     : require('../inactive.png') 
     return (
      <Image 
       source={image} 
       style={styles.tabIcon} 
      /> 
     ) 
    } 
}