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} />); 
}