1

任何人都知道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>
    )
}
4

1 回答 1

1

官方文件

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

以下是从文件中引用的：

有时您可能希望从定义导航器的组件中添加侦听器，而不是在屏幕内。您可以使用组件listeners上的道具Screen来添加侦听器。prop 接受一个对象，其中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');
    },
  })}
/>
于 2020-04-18T01:32:50.133 回答