React Navigation v.5 选项卡栏图标导航到模态答案

【问题标题】：React Navigation v.5 Tab Bar Icon Navigate to ModalReact Navigation v.5 选项卡栏图标导航到模态
【发布时间】：2020-06-30 05:13:08
【问题描述】：

谁知道 react navigation v.5 中 tabBarOnPress 的一个很好的替代品？我想在用户按下 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>
    )
}

【问题讨论】：

标签： react-native react-navigation react-navigation-stack react-navigation-v5 react-navigation-bottom-tab

【解决方案1】：

Official document

您可以使用Tab.Screen 的listeners 属性，这是最接近tabBarOnPress 恕我直言的替代品。

以下引用自文档：

有时您可能希望从定义导航器的组件中添加侦听器，而不是在屏幕内。您可以使用 Screen 组件上的 listeners 属性来添加侦听器。 listeners 属性接受一个对象，其中事件名称作为键，侦听器回调作为值。

例子：

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

【讨论】：