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

Question

我想在点击标签图标时改变图标的颜色，但是场景移动了但是颜色没有改变。如果代码没有解决问题，最好向您展示一种新方法。这是我的代码...

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>
        );
    }
}

帮帮我！

Answer 1

你的代码不明显 when/where this.props.selected 正在设置。

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

我也很想将 TabIcon 变成无状态组件以：

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

让生活更轻松:)

Answer 2

将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>

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

When clicked tab icon, i want to change tab icon color in react-native-router-flux Scene

reactjs

react-native

react-native-router-flux