反応するネイティブルータフラックスタブどのように選択したタブのアイコンを変更するには？

Question

私はreact-native-router-flux^4.0.0-beta.21のナビゲーションタブと反応ネイティブベクトルアイコンを使用しています。シーンを選択したときに、アイコンを変更したり、選択したシーンのアイコンの色を変更するにはどうすればよいですか？

<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> 

ここでIveは以下のようなアイコンを定義しましたが、フォーカスプロップのようなものをどのように渡しますか？

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

Answer 1

を一定に使用しています現在のアイコンがフォーカスされます。例えば

：君たちの助けのすべてのための

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

私はあなたがいるかどうかを確認、その後、機能にフォーカスさのparamをレンダリングするアイコンのパラメータとしてreciveすることができます...

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

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

私tabIconsを呼び出すために

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