將道具傳遞到TabIcon與反應本地路由器Flux

Question

我在我的應用程序中使用react-native-router-flux並希望將路徑傳遞給我的TabIcon組件的png圖像。我知道我可以爲每個選項卡製作一個不同的選項卡圖標組件，但除了圖像源外，這些圖標完全相同，我希望找到一種乾的方式來實現我的目標。在我的場景中，哪裏可以傳遞圖像路徑？

這裏是我的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> 
) 
} 

我的場景：

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

編輯

我試圖傳遞圖像中像這樣

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

在我TabIcon成分，如果我console.log(image)它打印出來"../images/feed.png"但我得到這個錯誤在模擬器：

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

Answer 1

在這個SO question考慮看看之後，我想通了：

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

場景

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