react-native - 如何在 React Native 中为每个选项卡设置不同的颜色

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>组件不需要任何 Prop 来单独处理每个选项卡的样式。

您可以通过实现自己的 TabBar 来实现这一点，您可以从自己那里返回 renderHeader .基本上就是抢the existing TabBar component ，将其粘贴到您的项目中，根据您的样式需求进行更新，导入并在您的 TabView 中使用而不是标准的 TabBar。