React-Native-Router-Flux Tab如何更改选定选项卡的图标

Question

我正在使用来自React-Native-Router-Flux ^4.0.0-Beta.21和React-Native-vector-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>
);

Answer 1

您可以接收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} /> );
}

Answer 2

我正在使用常数来调用我的塔比康

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}
/>

Answer 3

您可以定义状态，然后相应地更改状态：以下代码将帮助您解释场景。

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}

   />

提示：您也可以使用touchableWithableWithableWithOutFeedback Form React Native（目的是从该按钮显示不馈回）

Answer 4

const SimpleLineIcon= ({ focused, 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} /> );
}