Question

我尝试使用activeTintColor，inActiveTintColor，tintColor在图标，标签内以及标签上作为道具，甚至在风格内部，但活动/的颜色非活动标签不会更改。

我正在使用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的源代码和使用activeTintColor的search，你会看到它只作为props传递给用户定义的TabIcon组件。因此，为了使其工作，您必须在TabIcon类中指定行为。

我查了一下，确实我的TabIcon组件收到了activeTintColor prop以及聚焦（选中）道具。您可以使用这些道具设置所需的图标颜色。要指定图标，您只需使用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]

1 个答案: