react-native - 使用 React Native Router Flux 将 Prop 传递到 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 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')}>