使用 react-native-scrollable-tab-view 在选项卡之间切换时出现问题

Question

我正在使用 ScrollableTabView，但在选项卡之间切换时出现问题。在我的应用程序中，我有 3 个选项卡视图：全部、流行、菜单。当我在全部选项卡中时，我可以在全部选项卡中看到菜单选项卡。

here is the problem

这是我的 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;

谁能给我解释一下？

Answer 1

检查你的styles.tabbar：

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

你应该从这里移除 paddingHorizo​​ntal