有没有办法按下标签栏而不渲染组件屏幕?我一直在传递空函数,但它仍然呈现空白屏幕。我希望无论您按什么位置,它都会保留在主屏幕上。
向屏幕添加监听器。
component={() => null}
listeners={() => ({
tabPress: (e) => {
e.preventDefault(); // Prevents navigation
// Your code here for when you press the tab
},
})}
您可以通过创建自定义
tabBar
组件来避免导航到屏幕,在该组件中您可以处理每个 onPress
的 tabBarComponent
,这样您就可以避免导航并执行一些操作。仔细查看此处的反应导航文档中的示例:
https://reactnavigation.org/docs/bottom-tab-navigator/#tabbar
示例中的这行代码应该对您有帮助:
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
第1步:创建空组件
export function EmptyComponent() {
return null;
}
第2步:在bottomTabNav中渲染空组件
<Tab.Screen
name="EmptyComponent" //Render Empty Component
component={EmptyComponent}
options={{}}
listeners={({navigation}) => ({
tabPress: event => {
event.preventDefault();
navigation.navigate('UploadPosts'); // Navigate to different Stack Navigator, which is created by createStackNavigator
},
})}
/>