Блог

Я использую ScrollableTabView, и у меня возникла проблема при переключении между вкладками. В моем приложении у меня есть 3 вкладки: все, Популярные, меню. Когда я нахожусь на вкладке «Все», я вижу вкладку меню на вкладке «Все».

вот проблема

это мой HomeScreen.js :

 import React from 'react';
import { StyleSheet, View, Text, ImageBackground, Dimensions } from 'react-native';
import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view';
import All from '../src/components/All';
import Menu from '../src/components/Menu';
import Popular from '../src/components/Popular';

const HomeScreen = () => {
    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <ImageBackground
                    source={require("../src/assets/header.png")}
                    style={styles.imageBackground}
                    resizeMode="contain"
                >
                    <Text style={styles.title}>HOME</Text>
                </ImageBackground>
            </View>
            <View style={styles.tabbar}>
                <ScrollableTabView
                    initialPage={0}
                    renderTabBar={() =>
                        <DefaultTabBar underlineStyle={{ backgroundColor: 'green' }} style={{ borderWidth: 0 }} />}
                    tabBarActiveTextColor="green"
                >
                    <All tabLabel="All" />
                    <Menu tabLabel="Menu" />
                    <Popular tabLabel="Popular" />

                </ScrollableTabView>
            </View>
        </View>
    );
}

const { width } = Dimensions.get('screen');

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    header: {
        marginTop: 10,
        position: 'absolute'
    },
    tabbar: {
        flex: 1,
        marginTop: width * 0.3,
        paddingHorizontal: 30,
    },
    imageBackground: {
        width: width * 0.4,
        height: width * 0.4,
        alignItems: 'center'
    },
    title: {
        color: 'white',
        marginTop: 20,
        fontWeight: 'bold',
        fontSize: 25
    }
});

export default HomeScreen;
  

Может кто-нибудь дать мне объяснение?

Проверьте свои стили.панель вкладок:

 tabbar: {
        flex: 1,
        marginTop: width * 0.3,
        paddingHorizontal: 30,
    },
  

Вы должны удалить paddingHorizontal отсюда