我正在使用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>
现在我已经定义了一个像下面这样的图标,但是我如何传递像焦点道具一样的东西?
const iconBack = () => (
<TouchableHightLight onPress={console.log('home')} >
<MaterialIcon
name='keyboard-arrow-left'
size={28}
/>
</TouchableHightLight>
);
答案 0 :(得分:7)
您可以接收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} /> );
}
答案 1 :(得分:3)
我使用常数来调用我的tabIcons
import Icon from 'react-native-vector-icons/FontAwesome'
const iconProfile = () => (
<Icon color='#f53d3d' name='user-o' size={25} />
)
...
<Scene
key='profile'
hideNavBar
icon={iconProfile}
name='profile'
component={Register}
/>
答案 2 :(得分:0)
您可以定义状态,然后相应地更改状态: 下面的代码将帮助您解释这种情况。
import Icon from 'react-native-vector-icons/FontAwesome'
(您可以将其替换为自己的图标)
注意:将代码添加到您的类中是成员函数。
constructor(){
super()
this.state={
focused:false,
}
}
iconProfile = () => {
if(this.state.focused==false)
return(
<TouchableOpacity onPress={()=>{
this.setState({focused:true})
}}>
<Icon color='#f53d3d' name='user-o' size={25} />
</TouchableOpacity>
)
else{
return(
<TouchableOpacity>
<Icon color='green' name='user-o' size={25} />
</TouchableOpacity>
)
}
}
和场景:
<Scene key='tabbar' tabs={true} initial showLabel={false} hideNavBar tabBarStyle={{paddingTop:15}}>
<Scene
key="practice"
component={practice}
title="practice"
hideNavBar
icon={this.iconProfile}
/>
提示:您还可以使用touchableWithoutFeedback形式的本机反应(目的是不显示按钮的反馈)
答案 3 :(得分:-1)
const SimpleLineIcon= ({ selected, title }) => {
let image;
switch (title) {
case 'firstTab':
image = require('firstTabSelected.gif') : require('firstTab.gif');
break;
case 'secondTab':
image = require('secondTabSelected.gif') : require('secondTab.gif');
break;
}
return ( <Image source={image} /> );
}