2017-01-23 15 views
2

私のアプリでreact-native-router-fluxを使用していて、TabIconコンポーネントのpng画像へのパスを渡したいと思っています。私は各タブごとに異なるタブアイコンコンポーネントを作成することができますが、これらのアイコンはイメージソースを除いて全く同じで、私の目標を達成するためのDRY方法を探したいと思います。私のシーンではどこにイメージパスを渡すことができますか?React Native Router Fluxで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}> 
                //HERE 
     <Scene key='tab1' title='Feed' icon={TabIcon} image={'../images/feed.png'}> 
     <Scene 
      key='matchupsFeed' 
      component={MatchupsFeed} 
      title='Feed' 
      initial={true} 
     /> 
     </Scene> 
... 
... 
... 
0のように画像を渡して試してみました

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

EDIT

ここ

は私のTabIconコンポーネントです私はそれが"../images/feed.png"をプリントアウトconsole.log(image)が、私は、シミュレータでこのエラーを取得する場合、私のTabIconコンポーネント内

は:

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

答えて

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')}> 
関連する問題