Navigate to the screen when Tab on BottomTabNavigator is pressed

问题

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

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.

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.

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.

Questions:

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?

回答1:

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

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.

Hope this helps.

回答2:

I have not tried but I think... You can put your bottomNavigator in Stack Navigator and when you click plus icon. You can navigate to AddNewItem screen. And if its not working then you can try alternative as well like:- when you click on plus icon. It will navigate to screen with having your bottomNavigator still there. And you can invoke a function of stack navigation to AddNewItem screen automatically(forcibly) on your bottomNavigator screen.

来源：https://stackoverflow.com/questions/62052506/navigate-to-the-screen-when-tab-on-bottomtabnavigator-is-pressed