单击选项卡图标时，我想更改 react-native-router-flux 场景中的选项卡图标颜色答案

【问题标题】：When clicked tab icon, i want to change tab icon color in react-native-router-flux Scene单击选项卡图标时，我想更改 react-native-router-flux 场景中的选项卡图标颜色
【发布时间】：2018-09-08 13:27:33
【问题描述】：

单击选项卡图标时，我想更改图标的颜色，但场景移动但颜色没有改变。如果代码没有解决它，向您展示一种新方法是个好主意。这是我的代码...

import React, { Component } from 'react';

import { Router, Scene, Tabs } from 'react-native-router-flux';
import { Text, View } from 'react-native';

import LoginScreen from './screens/LoginScreen';
import Home from './screens/second/Home';
import Market from './screens/second/Market';
import Promotion from './screens/second/Promotion';
import Setting from './screens/second/Setting';

import Icon from 'react-native-vector-icons/FontAwesome'

class TabIcon extends React.Component {
    render() {
        return (
                <Icon
                    name={this.props.iconName}
                    color={this.props.selected ? '#000000' : '#808080'}
                    size={40}
                />
        )
    }
}

export default class Main extends React.Component {
    render() {
        return (
            <Router>
                <Scene key="root">
                    <Scene key="loginScreen" component={LoginScreen} animation='fade' hideNavBar={true} initial={true} />
                    <Tabs key="tabbar" showLabel={false} lazy={true} showIcon={true} tabBarPosition='bottom'>
                        <Scene key="tab1" title="tab1" iconName={'home'} icon={TabIcon} >
                            <Scene key="Home" component={Home} hideNavBar={true} initial />
                        </Scene>
                        <Scene key="tab2" title="tab2" iconName={'bullhorn'} icon={TabIcon} >
                            <Scene key="Market" component={Market} hideNavBar={true} initial />
                        </Scene>
                        <Scene key="tab3" title="tab3" iconName={'shopping-cart'} icon={TabIcon} >
                            <Scene key="Promotion" component={Promotion} hideNavBar={true} initial />
                        </Scene>
                        <Scene key="tab4" title="tab3" iconName={'cog'} icon={TabIcon} >
                            <Scene key="Setting" component={Setting} hideNavBar={true} initial />
                        </Scene>
                    </Tabs>
                </Scene>
            </Router>
        );
    }
}

帮帮我！

【问题讨论】：

你试过记录这个吗？ console.log('this.props.selected');
好主意。但是我是用visual studio代码写的，所以不知道怎么查看日志。
在终端或cmd promt中

标签： reactjs react-native react-native-router-flux

【解决方案1】：

更改 this.props.selected 为 this.props.focused

参考this项目

TabIcon 组件

const TabIcon = ({ icon, focused }) => (
  <Icon
    name={icon}
    size={26}
    color={focused ? AppColors.tabbar.iconSelected : AppColors.tabbar.iconDefault}
  />
);

标签路线

  <Tabs hideNavBar>
    <Stack title="Recipes" icon={TabIcon('search')} headerMode="float">
      <Scene component={ListingView} />
      <Scene key="recipeView" component={RecipeView} back />
    </Stack>
    <Scene title="Coming Soon" component={Placeholder} icon={TabIcon('timeline')} />
    <Scene title="Example Error" component={Error} icon={TabIcon('error')} />
    <Scene title="Style Guide" component={StyleGuide} icon={TabIcon('speaker-notes')} />
  </Tabs>

【讨论】：

【解决方案2】：

this.props.selected 的设置时间/位置并不明显。

您确定 selected 正在传递给 TabIcon 吗？

我也很想把 TabIcon 变成一个无状态的组件来：

const TabIcon = props => (
  <Icon
    name={props.iconName}
    color={props.selected ? '#000000' : '#808080'}
    size={40}
   />
);

让生活更轻松:)

【讨论】：

我很好奇class和const的区别。
这里有一个非常好的答案：stackoverflow.com/questions/37170809/…。基本上，const 是一个抽象的、无状态的函数。因为它是一个函数，所以它无权访问this，这意味着您不能拥有this.state，也无法在具有全局this 的函数之间进行通信。道具通过（见我的例子）。一般来说，尽可能多地尝试使用这种stateless 样式。它将减少错误并提高性能。