使用 React Native Router Flux 将 props 传递到 TabIcon 中

Question

我正在我的应用程序中使用react-native-router-flux，并希望传入我的 TabIcon 组件的 png 图像路径。我知道我可以为每个选项卡制作一个不同的选项卡图标组件，但是除了图像源之外，这些图标完全相同，我想找到一种 DRY 的方式来实现我的目标。我可以在场景中的哪个位置传递图像路径？

这是我的 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问题后，我想通了：

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