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

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

Answer 2

当/ this.props.selected被设置时，您的代码并不明显。

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

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

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

让生活更轻松：）

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

2 个答案: