本文介绍了如何隐藏TabBarNavigator动态反应本机的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在寻找从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>
)
}
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动态反应本机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！