无需组件屏幕渲染的标签栏导航

Question

有没有办法按下标签栏而不渲染组件屏幕？我一直在传递空函数，但它仍然呈现空白屏幕。我希望无论您按什么位置，它都会保留在主屏幕上。

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

，这样您就可以避免导航并执行一些操作。仔细查看此处的反应导航文档中的示例：

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