ActiveTintColor 和 InActiveTintColor 不工作 [React Native Router Flux]

Question

我试过在图标、选项卡中使用 activeTintColor、inActiveTintColor、tintColor，并在选项卡上作为道具，甚至在样式中使用，但颜色active/inactive 标签没有变化。

我正在使用 react-native-router-flux 4.0.0-beta.21

<Scene key={'tabBar'} tabs={true}
        tabBarStyle={AppStyles.tabBarStyle}
        tabStyle={AppStyles.tabStyle}
        tabBarPosition={'bottom'}
        activeTintColor={'#e91e63'}
        showLabel={false}>
        <Scene
            {...AppConfig.navbarProps}
            key={'map'}
            component={MapScreen}
            icon={props => TabIcon({icon: 'map-marker'})}
            analyticsDesc={'Map'}
        ></Scene>
        <Scene
            {...navbarPropsTabs}
            key={'home'}
            component={FeedScreen}
            icon={props => TabIcon({ ...props, icon: 'view-list'})}
            analyticsDesc={'Home'}
        ></Scene>
    </Scene>

Answer 1

如果您查看 react-native-router-flux 的源代码和 search 使用 activeTintColor 的地方，您会发现它仅作为道具传递给用户定义的 TabIcon 组件。因此，为了使其正常工作，您必须在 TabIcon class.

中指定行为

我检查了一下，确实我的 TabIcon 组件收到了 activeTintColor 道具以及聚焦（选定）道具。您可以使用这些道具来设置所需的图标颜色。要指定图标，您可以仅使用 icon={TabIcon} 而无需使用隐式道具传递。

class TabIcon extends React.Component {

    render () {

        var color = this.props.focused
            ? this.props.activeTintColor //'#3b5998'
            : this.props.inactiveTintColor//'#93a8d5'

        let componentBody =
            <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', alignSelf: 'center'}}>
                <Icon style={{color: color}} name={this.props.iconName} size={30} />
                <Text style={{color: color}}>{this.props.title}</Text>
            </View>

        return componentBody;
    }
}

我的场景定义看起来像

<Scene  key='Tabbar'
        tabs
        hideNavBar
        activeTintColor='#93a8d5'
        inactiveTintColor='#3b5998'
        tabBarStyle={styles.tabBar}
        default='Main'>

    <Scene  key='Main'
            title="Home"
            iconName={'file-text'}
            icon={TabIcon}
            hideNavBar
            component={Main}
            initial 
            />
    ...

ActiveTintColor 和 InActiveTintColor 不工作 [React Native Router Flux]

ActiveTintColor and InActiveTintColor Not Working [React Native Router Flux]

react-native

react-native-android

react-native-router-flux