在React Native 0.62
中是否可以滚动显示隐藏createBottomTabNavigator
中使用reactnavigation.org创建的标签栏?
我很好奇是否有可能以与LinkedIn相似的方式,当您向下滚动页面时,选项卡消失,而当您向上滚动时,它又重新出现。还是只能使用自定义标签栏?
是,可以隐藏bottomtabbar。
自定义和默认标签栏都可以使用
我们可以使用tabBarVisible选项进行隐藏和显示。我们可以使用onScroll并在滚动中使用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>
);
}