Реагировать Навигация v.5 Значок панели вкладок Перейти к модальному

Question

Кто-нибудь знает хорошую альтернативу tabBarOnPress в реагирует навигация v.5 ? Я хочу перейти к модальному стеку, когда пользователь нажимает tabIcon (то есть отменяет его стандартное поведение навигации), но значок, кажется, сначала перемещается к экрану вкладок, а затем - к модальному.

Для пояснения, вот мой компонент PostIcon TabIcon

export const PostStackIcon: React.FC<TabBarIconProps> = ({ size, color }) => {
    const navigation = useNavigation();

    const goToCreatePost = () => {
        navigation.navigate('CreatePostStack', { screen: 'CreatePost'});
    }

    return (
        <TouchableWithoutFeedback onPress={() => goToCreatePost()}>
            <Icon
                name="Post"
                width={size * 2}
                height={size}
                fillOpacity={0}
                stroke={color} 
                secondaryStroke={color}
            />
        </TouchableWithoutFeedback>
    )
}

Answer 1

Официальный документ

Вы можете использовать listeners опору Tab.Screen, это наиболее близкая альтернатива tabBarOnPress ИМХО.

Ниже приводится цитата из документы:

Иногда вам может потребоваться добавить прослушиватель из компонента, в котором вы определили навигатор, а не внутри экрана. Вы можете использовать опору listeners в компоненте Screen для добавления слушателей. listeners prop принимает объект с именами событий в качестве ключей и обратными вызовами слушателя в качестве значений.

Пример:

<Tabs.Screen
  name="Chat"
  component={Chat}
  listeners={{
    tabPress: e => {
      // Prevent default action
      e.preventDefault();
    },
  }}
/>

Вы также можете передать обратный вызов который возвращает объект со слушателями. Он получит navigation и route в качестве аргументов.

Пример:

<Tabs.Screen
  name="Chat"
  component={Chat}
  listeners={({ navigation, route }) => ({
    tabPress: e => {
      // Prevent default action
      e.preventDefault();

      // Do something with the `navigation` object
      navigation.navigate('AnotherPlace');
    },
  })}
/>