使用 React Native Router Flux 将道具传递到 TabIcon
Pass props into TabIcon with React Native Router Flux
我在我的应用程序中使用 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'
看了这个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 组件的 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'
看了这个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')}>