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

使用React Native Router Flux将道具传递给TabIcon

1 个答案: