将道具传递到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')}>