react-native-router-flux選項卡如何更改選定選項卡的圖標？

Question

我使用來自react-native-router-flux^4.0.0-beta.21和react-native-vector-icons的導航標籤。選擇場景時，如何更改圖標或更改所選場景圖標的顏色？

<Scene 
     key='navigationTab' 
     tabs 
     tabBarStyle={styles.tabBarStyle} 
     showLabel={false} 
> 
     <Scene 
       key='home' 
       hideNavBar 
       icon={SimpleLineIcon} 
       name='home' 
       size={25} 
       component={PostList} 
       initial 
     /> 
     <Scene 
       key='profile' 
       hideNavBar 
       icon={FontAwesomeIcon} 
       name='user-o' 
       size={25} 
       component={Register} 
     /> 
</Scene> 

現在我已經定義了一個像下圖一樣的圖標，但是如何傳遞像焦點道具之類的東西？

const iconBack =() => (
     <TouchableHightLight onPress={console.log('home')} > 
       <MaterialIcon 
         name='keyboard-arrow-left' 
         size={28} 
       /> 
     </TouchableHightLight> 
); 

Answer 1

可以recive作爲參數圖標渲染功能聚焦PARAM，然後檢查目前的圖標是重點。

例如：

const SimpleLineIcon= ({ title, focused }) => { 
    let image; 

    switch (title) { 
     case 'firstTab': 
      image = focused ? require('firstTabSelected.gif') : require('firstTab.gif'); 
      break; 

     case 'secondTab': 
      image = focused ? require('secondTabSelected.gif') : require('secondTab.gif'); 
      break; 
    } 

    return (<Image source={image} />); 
} 

Answer 2

我使用常量打電話給我tabIcons

import Icon from 'react-native-vector-icons/FontAwesome' 

const iconProfile =() => (
    <Icon color='#f53d3d' name='user-o' size={25} /> 
) 

...

<Scene 
    key='profile' 
    hideNavBar 
    icon={iconProfile} 
    name='profile' 
    component={Register} 
/> 

Answer 3

const SimpleLineIcon= ({ selected, title }) => { 
    let image; 

    switch (title) { 
     case 'firstTab': 
      image = require('firstTabSelected.gif') : require('firstTab.gif'); 
      break; 

     case 'secondTab': 
      image = require('secondTabSelected.gif') : require('secondTab.gif'); 
      break; 
    } 

    return (<Image source={image} />); 
}