按下BottomTabNavigator上的Tab时导航到屏幕 [英] Navigate to the screen when Tab on BottomTabNavigator is pressed

问题描述

我想在按下 BottomTabNavigator 上的特定选项卡时导航到屏幕.

I would like to navigate to the screen when the particular tab on the BottomTabNavigator is pressed.

通常，当按下选项卡时，它会自动导航到配置的屏幕.但我不想有这种行为.我想隐藏该屏幕上的底部选项卡，并在顶部栏中提供 back 功能.我通常在 ReactNavigationStack 屏幕中使用 navigation.navigate('routeName') .但是我不知道在BottomTabNavigator配置中如何/在哪里编写这段代码.

Normally, when the tab is pressed, it navigates to the configured screen automatically. But I don't want to have that behaviour. I want to hide the bottom tab on that screen and provide back feature in the top bar too. I normally use navigation.navigate('routeName') in ReactNavigationStack screens. But I don't know how/where to write this code in the BottomTabNavigator configuration.

例如，我在底部栏中有以下 5 个标签.我想在按下 Add 按钮时导航到 AddNewScreen.我不知道把 onPress 事件放在哪里.我试着把它放在 options 和 BottomTab.Screen 下.但仍然没有运气.

For example, I've got the following 5 tabs in the bottom bar. I want to navigate to AddNewScreen when Add button is pressed. I don't know where to put that onPress event. I tried to put it under options and BottomTab.Screen. But still no luck.

我试图拦截 onPress 事件以使用 navigation.navigate.但它甚至没有被击中，它总是用标签栏打开 AddNewScreen.

I tried to intercept onPress event to use navigation.navigate. But it's not even hit and it always opens the AddNewScreen with the tab bar.

<BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
      <BottomTab.Screen
        name="Home"
        component={HomeScreen}
        initialParams="Home Params"
        options={{
          title: 'Home',
          tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="md-home" iconType="ion" />,
        }}
      />      
      <BottomTab.Screen
        name="AddNew"
        component={AddNewScreen}        
        options={{
          title: 'Add',
          tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="md-add-circle" iconType="ion" 
          onPress={(e) => {
            e.preventDefault();
            console.log(e)
          }} />,    
        }}
      />
</BottomTab.Navigator>

添加新屏幕始终使用底部标签栏打开.

The Add new screen is always opened with the bottom tab bar.

问题:

无论如何，当标签为时，无论如何都可以导航到特定屏幕压?
1. 无论如何要隐藏添加新的底部标签栏屏幕?

1. Is there anyway to navigate to specific screen when the tab is pressed?
2. Is there anyway to hide the bottom tab bar on that Add New Screen?

推荐答案

您可以使用标签栏按钮在底部工具栏中设置自定义功能.代码如下

You can have a custom functionality in the bottom toolbar using the tabbar button. The code would be like below

 <Tab.Screen name="Settings2" component={SettingsScreen} options={{
  tabBarButton: (props) => (<TouchableOpacity  {...props} onPress={()=>alert(123)}/>),
}}/>

这将呈现一个普通的底部标签栏按钮，但 onclick 将显示警报，您可以使用导航或任何其他您需要的代码替换代码.'SettingsScreen' 组件也可以是一个返回 null 的虚拟组件.

This would render a normal bottom tab bar button but the onclick would show the alert, you can replace the code with your navigate or any other code you need. Also the 'SettingsScreen' component can be a dummy component returning null.

希望这会有所帮助.

这篇关于按下BottomTabNavigator上的Tab时导航到屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！