隐藏Reaction Native中的createBottomTabNavigator选项卡栏 [英] Hide createBottomTabNavigator Tabbar in React Native
本文介绍了隐藏Reaction Native中的createBottomTabNavigator选项卡栏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在React Native 0.62
中,是否可以在滚动时隐藏使用createBottomTabNavigator
从reactnavigation.org创建的选项卡栏?
我很好奇是否有可能用LinkedIn类似的方式,当你向下滚动页面时,选项卡栏消失,当你向上滚动时,它重新出现。或者只能使用自定义选项卡栏?
推荐答案
可以,可以隐藏底部选项卡栏。
可以使用自定义选项卡栏和默认选项卡栏
我们可以使用tabBarVisible选项隐藏和显示。我们可以使用onScroll和Inside on scroll,我们可以使用dispatch来显示和隐藏
这是演示:https://snack.expo.io/@nomi9995/tab-navigation-%7C-bottom-tab-hide
const getTabBarVisible = (route) => {
const params = route.params;
if (params) {
if (params.tabBarVisible === false) {
return false;
}
}
return true;
};
<Tab.Screen
name="Home"
component={HomeScreen}
options={({ route }) => ({
tabBarVisible: getTabBarVisible(route),
})}
/>
完整代码:
import * as React from "react";
import { Text, View, ScrollView, Dimensions } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { CommonActions } from "@react-navigation/native";
const height = Dimensions.get("window").height;
const width = Dimensions.get("window").width;
class HomeScreen extends React.Component {
offset = 0;
onScrollHandler = (e) => {
const currentOffset = e.nativeEvent.contentOffset.y;
var direction = currentOffset > this.offset ? "down" : "up";
this.offset = currentOffset;
if (direction === "down") {
this.props.navigation.dispatch(
CommonActions.setParams({
tabBarVisible: false,
})
);
} else {
this.props.navigation.dispatch(
CommonActions.setParams({
tabBarVisible: true,
})
);
}
};
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<ScrollView
showsVerticalScrollIndicator={false}
scrollEventThrottle={16}
onScroll={this.onScrollHandler}
>
<View
style={{
alignItems: "center",
height: height * 2,
width: width,
backgroundColor: "red",
}}
>
<View
style={{
backgroundColor: "blue",
width: 100,
height: height * 2,
}}
/>
</View>
</ScrollView>
</View>
);
}
}
function SettingsScreen() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Settings!</Text>
</View>
);
}
const Tab = createBottomTabNavigator();
const getTabBarVisible = (route) => {
const params = route.params;
if (params) {
if (params.tabBarVisible === false) {
return false;
}
}
return true;
};
class MyTabs extends React.Component {
render() {
return (
<Tab.Navigator>
<Tab.Screen
name="Home"
component={HomeScreen}
options={({ route }) => ({
tabBarVisible: getTabBarVisible(route),
})}
/>
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}
}
export default function App() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
这篇关于隐藏Reaction Native中的createBottomTabNavigator选项卡栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文