ActiveTintColor и InActiveTintColor не работают [React Native Router Flux]

Я пробовал играть с activeTintColor, inActiveTintColor, tintColor внутри значка, вкладок, а также на вкладке в качестве опоры и даже внутри стиля, но цвет активной / неактивной вкладки не меняется.

Я работаю с response-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>

react-native react-native-android react-native-router-flux
person red-devil    schedule 07.10.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Если вы посмотрите исходный код для response-native-router-flux и search, где используется activeTintColor, вы увидите, что он передается только как реквизиты для определяемого пользователем компонента TabIcon. Итак, чтобы заставить его работать, вы должны указать поведение в своем классе TabIcon.

Я проверил это, и действительно, мой компонент TabIcon получил свойство activeTintColor, а также сфокусированное (выбранное) свойство. Вы можете использовать эти реквизиты, чтобы установить желаемый цвет значка. Чтобы указать значок, вы можете использовать только icon={TabIcon} без использования неявной передачи props.

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 
            />
    ...
person Dennis Tsoi    schedule 09.10.2017
comment
Спасибо @Dennis. Как отправить iconName, activeTintColor в сцене с помощью icon = {TabIcon} - person red-devil; 09.10.2017
comment
Спасибо, @Dennis! Я сделал все, что вы сказали выше, но для меня this.props.selected оказывается неопределенным, из-за чего оба цвета вкладок остаются неактивными. - person red-devil; 09.10.2017
comment
Я использую старый роутер. Вместо этого попробуйте использовать props.focused. - person Dennis Tsoi; 09.10.2017
comment
Работает как шарм. :) - person red-devil; 09.10.2017
comment
Я отредактировал ответ, чтобы он не запутал новых пользователей API. - person Dennis Tsoi; 09.10.2017
comment
Привет. Я считаю, что с наградой что-то пошло не так. - person Dennis Tsoi; 11.10.2017