Comment définir des couleurs différentes pour chaque onglet en react native ?

Question

Dans mon application, je crée un onglet à l'aide de TabViewAnimated. J'ai besoin que chaque onglet ait des couleurs différentes. J'ai essayé de plusieurs façons mais ça n'a pas marché. Voici le résultat que j'ai obtenu jusqu'à présent.

Ce que je veux est donné ci-dessous.

Voici mon code.

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,
    }
};

Comme je l'ai étudié, tabStyle peut être utilisé pour styliser des onglets individuels. Je l'ai utilisé mais cela n'a pas fonctionné. Veuillez m'aider à ajouter différentes couleurs comme je l'ai mentionné ci-dessus.

Answer 1

Je crois tabStyle définit le style pour chaque onglet, le <TabBar> ne s'attend pas à ce que le style soit géré individuellement pour chaque onglet.

Vous pouvez y parvenir en mettant en œuvre votre propre TabBar, que vous pouvez renvoyer à partir de votre renderHeader . En gros, il suffit de prendre le composant existant TabBar vous le collez dans votre projet, vous le mettez à jour en fonction de vos besoins stylistiques, vous l'importez et l'utilisez dans votre projet. TabView au lieu de la barre d'onglets standard.

Answer 2

J'ai finalement réussi à le faire en utilisant des groupes de boutons. Voici mon code.

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
import { Button, ButtonGroup } from 'react-native-elements';

const component1 = () => {
    return (
        <View style={{ backgroundColor: 'red', flex: 1, width: '100%' }}>
            <Text>Hello</Text>
        </View>
    );
}
const component2 = () => {
    return (
        <View style={{ backgroundColor: 'blue', flex: 1, width: '100%' }}>
            <Text>World</Text>
        </View>
    );
}
const component3 = () => {
    return (
        <View style={{ backgroundColor: 'yellow', flex: 1, width: '100%' }}>
            <Text>ButtonGroup</Text>
        </View>
    );
}

class App extends Component {
    constructor() {
        super()
        this.state = {
            selectedIndex: 0
        }
        this.updateIndex = this.updateIndex.bind(this)
    }
    updateIndex(selectedIndex) {
        this.setState({ selectedIndex })
    }

    render() {
        const buttons = [{ element: component1 }, { element: component2 }, { element: component3 }]
        const { selectedIndex } = this.state
        if (selectedIndex === 0) {
            return (
                <View>
                    <ButtonGroup
                        onPress={this.updateIndex}
                        selectedIndex={selectedIndex}
                        buttons={buttons}
                        containerStyle={{ height: 100 }}
                    />
                    <View style={{ backgroundColor: 'yellow', width: '100%', height: 500 }} />
                </View>
             );
        } else if (selectedIndex === 1) {
            return (
                <View>
                    <ButtonGroup
                        onPress={this.updateIndex}
                        selectedIndex={selectedIndex}
                        buttons={buttons}
                        containerStyle={{ height: 100 }}
                    />
                    <View style={{ backgroundColor: 'purple', width: '100%', height: 500 }} />
                </View>
            );
        } else {
            return (
                <View>
                    <ButtonGroup
                        onPress={this.updateIndex}
                        selectedIndex={selectedIndex}
                        buttons={buttons}
                        containerStyle={{ height: 100 }}
                    />
                    <View style={{ backgroundColor: 'pink', width: '100%', height: 500 }} />
                </View>
            );
        }

    }

}

AppRegistry.registerComponent('testApp', () => App);