没有组件屏幕渲染的选项卡栏导航

Question

有没有办法按下选项卡栏而不渲染组件屏幕？我一直在传递null函数，但它仍然呈现空白屏幕。我希望无论你按哪里，它都会显示在主屏幕上。

Answer 1

在屏幕中添加一个监听器。

component={() => null}
listeners={() => ({
tabPress: (e) => {
e.preventDefault(); // Prevents navigation
// Your code here for when you press the tab
},
})}

Answer 2

您可以通过创建自定义tabBar组件来避免导航到屏幕，在该组件中，您可以将onPress处理到每个tabBarComponent，这样您就可以避免导航并执行一些操作。请仔细查看react导航文档中的示例：

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);
}
};

Answer 3

步骤1：创建空组件

export function EmptyComponent() {
return null;
}

步骤2：在底部TabNav中呈现空组件

<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
},
})}
/>