如何为本机中的每个选项卡设置不同的颜色

Question

在我的应用中，我使用TabViewAnimated创建了一个标签。我需要每个标签都有不同的颜色。我在很多方面尝试过这种方法，但是没有用。这是我到现在为止的输出。

我想要的是下面的内容。

这是我的代码。

import React, { PureComponent } from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { TabViewAnimated, TabBar, SceneMap } from 'react-native-tab-view';

const initialLayout = {
    height: 0,
    width: Dimensions.get('window').width,
};

const FirstRoute = () => {
    return (
        <View style={[styles.container, styles.FirstRouteStyle]} />
    );
};

const SecondRoute = () => {
    return (
        <View style={[styles.container, styles.SecondRouteStyle]} />
    );
};

const ThirdRoute = () => {
    return (
        <View style={[styles.container, styles.ThirdRouteStyle]} />
    );
};


export default class TabView extends PureComponent {
    state = {
        index: 0,
        routes: [
            { key: 'first', title: 'First', tabStyle: { backgroundColor: 'red' } },
            { key: 'second', title: 'Second', tabStyle: { backgroundColor: 'green' } },
            { key: 'third', title: 'Third', tabStyle: { backgroundColor: 'blue' } },
        ],
    };

    _handleIndexChange = index => this.setState({ index });


    _renderScene = SceneMap({
        first: FirstRoute,
        second: SecondRoute,
        third: ThirdRoute,
    });

    _renderHeader(props) {
        return (
            <TabBar
                {...props}
                style={styles.tabbar}
                tabStyle={styles.tabStyle}
                labelStyle={styles.labelStyle}
            />
        )
      }

    render() {
        return (
            <TabViewAnimated
                style={styles.container}
                navigationState={this.state}
                renderScene={this._renderScene}
                renderHeader={this._renderHeader}
                onIndexChange={this._handleIndexChange}
                initialLayout={initialLayout}
            />
        );
    }
}

const styles = {
    container: {
        flex: 1,
    },
    FirstRouteStyle: {
        backgroundColor: '#ff4081'
    },
    SecondRouteStyle: {
        backgroundColor: '#673ab7'
    },
    ThirdRouteStyle: {
        backgroundColor: 'yellow'
    },
    tabbar: {
        //backgroundColor: 'green',
        height: 100,
        justifyContent: 'center'
    },
    tabStyle: {

    },
    labelStyle: {

    },
    tablabel: {
        backgroundColor: 'transparent',
        color: 'black',
        fontSize: 12,
        margin: 4,
    }
};

正如我所研究的那样，tabStyle可用于设置各个标签的样式。我用过它，但它没有用。如上所述，请帮我添加不同的颜色。

Answer 1

我相信tabStyle为每个标签设置样式，<TabBar>组件期望没有道具可以单独处理每个标签的样式。

您可以通过实施自己的TabBar来实现这一目标，您可以从renderHeader返回。基本上只需抓取the existing TabBar component，将其粘贴到您的项目中，根据您的样式需求进行更新，导入并使用TabView代替标准TabBar。