Passer les props dans TabIcon avec React Native Router Flux

Question

J'utilise react-native-router-flux dans mon application et je veux passer des chemins vers des images png pour mes composants TabIcon. Je sais que je pourrais simplement créer un composant d'icône d'onglet différent pour chaque onglet, mais ces icônes seraient exactement les mêmes, à l'exception de la source de l'image, et je veux trouver un moyen DRY d'atteindre mon objectif. Où, dans mes scènes, puis-je passer le chemin de l'image ?

Voici mon composant TabIcon :

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

Mes scènes :

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

J'ai essayé de passer l'image comme suit

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

Dans mon composant TabIcon, si je console.log(image) il imprime "../images/feed.png" mais j'obtiens cette erreur dans le simulateur :

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

Answer 1

Après avoir jeté un coup d'œil à cette Question j'ai compris :

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

Scènes

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')}>