我正在使用 react-native-router-flux ^4.0.0-beta.21 和 react-native-vector-icons 中的导航选项卡。如何在选择场景时更改图标或更改所选场景的图标颜色?
<Scene
key='navigationTab'
tabs
tabBarStyle={styles.tabBarStyle}
showLabel={false}
>
<Scene
key='home'
hideNavBar
icon={SimpleLineIcon}
name='home'
size={25}
component={PostList}
initial
/>
<Scene
key='profile'
hideNavBar
icon={FontAwesomeIcon}
name='user-o'
size={25}
component={Register}
/>
</Scene>
现在我定义了一个像下面这样的图标,但是我如何传递像焦点 Prop 这样的东西?
const iconBack = () => (
<TouchableHightLight onPress={console.log('home')} >
<MaterialIcon
name='keyboard-arrow-left'
size={28}
/>
</TouchableHightLight>
);
最佳答案
您可以收到 focused
作为图标渲染功能的参数,然后检查当前图标是否聚焦。
例如:
const SimpleLineIcon= ({ title, focused }) => {
let image;
switch (title) {
case 'firstTab':
image = focused ? require('firstTabSelected.gif') : require('firstTab.gif');
break;
case 'secondTab':
image = focused ? require('secondTabSelected.gif') : require('secondTab.gif');
break;
}
return ( <Image source={image} /> );
}
关于react-native-router-flux tabs 如何更改所选选项卡的图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46190340/