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'