Переход к экрану при нажатии Tab на BottomTabNavigator

Question

Я хотел бы перейти к экрану при нажатии определенной вкладки в BottomTabNavigator.

Обычно, когда вкладка нажата, происходит автоматический переход на настроенный экран. Но я не хочу такого поведения. Я хочу скрыть нижнюю вкладку на этом экране и добавить функцию назад на верхней панели. Обычно я использую navigation.navigate('routeName') на экранах ReactNavigationStack. Но я не знаю, как / где написать этот код в конфигурации BottomTabNavigator.

Например, у меня есть следующие 5 вкладок в нижней панели. Я хочу перейти к AddNewScreen при нажатии кнопки Add . Я не знаю, где разместить это событие onPress. Пробовал ставить под options и BottomTab.Screen. Но все равно не повезло.

Я попытался перехватить событие onPress , чтобы использовать navigation.navigate. Но он даже не попадает, и он всегда открывает AddNewScreen с панелью вкладок.

<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>

Экран «Добавить новый» всегда открывается с нижней панелью вкладок.

Вопросы :

1. Есть ли способ перейти к конкретному экрану c при нажатии вкладки?
2. Есть ли способ скрыть нижнюю панель вкладок на этом «Добавить новый экран»?

Answer 1

Вы можете иметь настраиваемые функции на нижней панели инструментов с помощью кнопки панели вкладок. Код будет выглядеть следующим образом:

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

Это будет отображать обычную кнопку нижней панели вкладок, но onclick покажет предупреждение, вы можете заменить код своим навигационным или любым другим кодом, который вам нужен. Также компонент SettingsScreen может быть фиктивным компонентом, возвращающим null.

Надеюсь, это поможет.

Answer 2

Не пробовал, но думаю ... Вы можете поставить свой bottomNavigator в Stack Navigator и при нажатии на значок плюса. Вы можете перейти к экрану AddNewItem. И если он не работает, вы также можете попробовать альтернативу, например: - при нажатии на значок плюса. Он перейдет к экрану с вашим нижним навигатором. И вы можете вызвать функцию навигации по стеку на экран AddNewItem автоматически (принудительно) на вашем нижнем экране Navigator.