Pass Requisiten in TabIcon mit Reactive Native Router Flux

Question

Ich verwende react-native-router-flux in meiner App und möchte Pfade zu PNG-Bildern für meine TabIcon-Komponenten übergeben. Ich weiß, dass ich für jede Registerkarte einfach eine andere Tabsymbol-Komponente erstellen könnte, aber diese Symbole wären genau die gleichen, mit Ausnahme der Bildquelle, und ich möchte einen DRY-Weg finden, um mein Ziel zu erreichen. Wo kann ich in meinen Szenen den Bildweg weitergeben?

Hier ist meine TabIcon Komponente:

const TabIcon = ({ selected, title, image }) => { 
    const tabStyle = selected ? styles.selected : styles.unselected 
    return (
    <View style={tabStyle}> 
     <Image 
     style={{height: 35, width: 35}} 
     source={require(image)} 
     /> 
    </View> 
) 
} 

Meine Szenen:

const Scenes = Actions.create(
    <Scene key='root'> 
    <Scene key='tabbar' tabs={true} tabBarStyle={styles.tabBarStyle}> 
     <Scene key='tab1' title='Feed' icon={TabIcon}> 
     <Scene 
      key='Feed' 
      component={Feed} 
      title='Feed' 
      initial={true} 
     /> 
     </Scene> 
     <Scene key='tab2' title='Create' icon={TabIcon}> 
     <Scene 
      key='Create' 
      component={Create} 
      title='Create' 
     /> 
     </Scene> 
     <Scene key='tab3' title='Leaderboard' icon={TabIcon}> 
     <Scene 
      key='leaderboard' 
      component={Leaderboard} 
      title='Leaderboard' 
     /> 
     </Scene> 
    </Scene> 
    </Scene> 
) 

EDIT

ich wie so versucht haben

const Scenes = Actions.create(
    <Scene key='root'> 
    <Scene key='tabbar' tabs={true} tabBarStyle={styles.tabBarStyle}> 
                //HERE 
     <Scene key='tab1' title='Feed' icon={TabIcon} image={'../images/feed.png'}> 
     <Scene 
      key='matchupsFeed' 
      component={MatchupsFeed} 
      title='Feed' 
      initial={true} 
     /> 
     </Scene> 
... 
... 
... 

0 im Bild vorbei

Innerhalb meiner TabIcon Komponente, wenn ich console.log(image) es "../images/feed.png" ausdruckt, aber ich erhalte diesen Fehler im Simulator:

Unknown named module: '../images/feed.png' 

Answer 1

Nach einem Blick auf diese SO question nehmen, dachte ich es aus:

const TabIcon = ({ selected, title, image }) => { 
    const selectColor = selected ? '#ED1B25' : '#FFF' 
    return (
    <View style={[styles.tabStyle, {borderBottomColor: selectColor}]}> 
     <Image 
     style={{height: 35, width: 35}} 
     // Change HERE 
     source={image} 
     /> 
    </View> 
) 
} 

Szenen

const Scenes = Actions.create(
    <Scene key='root'> 
    <Scene key='tabbar' tabs={true} tabBarStyle={styles.tabBarStyle}> 
                //Change HERE 
     <Scene key='tab1' title='Feed' icon={TabIcon} image={require('../images/feed.png')}>