导航添加带有弹出列表的“更多”标签，但不导航至标签

Question

我基本上是想为iOS和ANDROID添加一个“更多”按钮，该按钮会弹出可供选择的选项列表。看起来像这样（IOS more button）和（ANDROID more button）。

我正在使用React Navigation创建TabNavigator TabBar，并且我知道如何添加新标签，我只是不确定如何创建一个小的菜单列表，当我单击Tab按钮而不是将我导航到标签按钮屏幕。

关于此事的任何想法？

Answer 1

这适用于可能通过Google搜索到达此处的任何人。您可以防止按Tab键的默认行为（例如，创建More按钮而不是导航）。

React.useEffect(() => {
  const unsubscribe = navigation.addListener('tabPress', e => {
    // Prevent default behavior
    e.preventDefault();

    // Do something manually
    // ...
  });

  return unsubscribe;
}, [navigation]);

Try example here

---或----

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

阅读有关导航事件的更多信息here