如何隐藏TabBarNavigator动态反应本机 [英] How to Hide TabBarNavigator dynamically react native

问题描述

我正在寻找从UserScreen

中隐藏bottomTabNavigatoronScoll的方法

这是我的userScreen：

    function Users() {
    const {headerText, interestText, interestShell, interestsLayout, aboutText, userImage} = styles;

    return (
        <View>
            <ScrollView showsVerticalScrollIndicator={false}>
                <View style={{flex: 1}}>
                    <ProfileButton/>
                    <Image style={userImage} source={mockUsers[0].pictures[0]}/>
                    <UserProfileInfo/>
                </View>
                <View>
                    <Text style={headerText}>About</Text>
                    <View style={{marginLeft: 32}}>
                        <Text style={aboutText}>
                            {mockUsers[0].about}
                        </Text>
                    </View>
                    <Text style={headerText}>Interests</Text>
                    <View style={interestsLayout}>
                        {mockUsers[0].userInterests?.map((interest, index) => {
                            return (
                                <View style={interestShell}>
                                    <Text key={`interest-${index}`} style={interestText}>{interest}</Text>
                                </View>
                            )
                        })}
                    </View>
                    <Text style={headerText}>Questions and answers</Text>
                    <AnsweredQuestionInput/>
                    <AnsweredQuestionInput/>
                    <AnsweredQuestionInput/>
                    <Text style={headerText}>Pictures</Text>
                    <Pictures userPictures={mockUsers[0].pictures} blur={true}/>
                </View>
            </ScrollView>
            <LikeAndDislike/>
        </View>

    );
}

这是我的bottomTabNavigator：

    function BottomTabNavigator() {
    const {buttonShell, buttonText} = styles;
    const Tab = createBottomTabNavigator();
    const Icon = createIconSet(glyphMap, 'Fuze', 'Fuze.ttf');

    return (
        <Tab.Navigator
            initialRouteName="Users"
            screenOptions={({route}) => ({
                headerShown: false,
                tabBarShowLabel: false,
                tabBarStyle: {borderColor: '#DBDBDB', height: 88, paddingTop: 16},
            })}
        >
            {
                bottomTabs.map((bottomTab) => {
                        return (
                            <Tab.Screen
                                key={`screen-${bottomTab.title}`}
                                name={bottomTab.title}
                                component={bottomTab.componentName}
                                options={{
                                    unmountOnBlur: true,
                                    tabBarIcon: (({focused}) => {
                                        return !focused ?
                                            <Icon name={bottomTab.icon} size={32}/> :
                                            <View style={buttonShell}>
                                                <Text style={buttonText}>{bottomTab.title}</Text>
                                            </View>

                                    })
                                }}
                            />
                        )
                    }
                )
            }
        </Tab.Navigator>
    )
}

到目前为止，我一直在研究，发现Reaction导航删除了tabBarVisible选项，我看到人们隐藏屏幕的唯一其他方式是通过screenOptions上的css设置display: 'none' 我很想找到一种方法来从用户屏幕上传递一个如果滚动返回TRUE，然后根据布尔值设置显示。任何帮助都是绝妙的。谢谢

推荐答案

在Reaction导航中，他们已将删除，而代之以tabBarStyles: {display: 'none'}。因此，我将usersScreen中的代码更新为：

function Users() {
const navigation = useNavigation();

const hideTabBar = () => {
    navigation.setOptions({
        tabBarStyle: {display: 'none'},
    });
};

const showTabBar = () => {
    navigation.setOptions({
        tabBarStyle: {display: 'flex', borderColor: '#DBDBDB', height: 88, paddingTop: 16},
    });
};

useEffect(() => hideTabBar(), [])

return (
    <View>
        <ScrollView
            showsVerticalScrollIndicator={false}
            onMomentumScrollEnd={() => showTabBar()}
            onMomentumScrollBegin={() => hideTabBar()}
        >
           //some code//
        </ScrollView>
        <LikeAndDislike/>
    </View>
);
}

这篇关于如何隐藏TabBarNavigator动态反应本机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！