按下 BottomTabNavigator 上的 Tab 时导航到屏幕答案

【问题标题】：Navigate to the screen when Tab on BottomTabNavigator is pressed按下 BottomTabNavigator 上的 Tab 时导航到屏幕
【发布时间】：2020-05-27 20:41:12
【问题描述】：

我想在按下 BottomTabNavigator 上的特定选项卡时导航到屏幕。

通常，当按下选项卡时，它会自动导航到配置的屏幕。但我不想有这种行为。我想隐藏该屏幕上的底部标签，并在顶部栏中也提供 back 功能。我通常在 ReactNavigationStack 屏幕中使用navigation.navigate('routeName')。但我不知道在 BottomTabNavigator 配置中如何/在何处编写此代码。

例如，我在底部栏中有以下 5 个选项卡。当按下 Add 按钮时，我想导航到 AddNewScreen。我不知道在哪里放置 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>

添加新屏幕始终使用底部标签栏打开。

问题：

是否有隐藏底部标签栏的添加新屏幕？

【问题讨论】：

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

【解决方案1】：

更新：

Navigation library v6 支持Listener 功能可以使用

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

      //Any custom code here
      alert(123);
    },
  }}
/>;

您可以使用标签栏按钮在底部工具栏中拥有自定义功能。代码如下所示

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

这将呈现一个普通的底部标签栏按钮，但 onclick 会显示警报，您可以用您的导航或您需要的任何其他代码替换代码。 'SettingsScreen' 组件也可以是返回 null 的虚拟组件。

希望这会有所帮助。

【讨论】：

感谢您的回答，但是当我使用props.navigation 时，它告诉我导航是undefined。 tabBarButton 似乎没有 navigation 对象，我们如何检索它？
您必须将一个函数传递给选项，该选项将接收导航作为参数
谢谢！！它的工作原理是options={({navigation}) => { return { tabBarButton: () => ( <TouchableOpacity onPress={() => navigation.navigate('Market')}> </TouchableOpacity> ), }; }}
感谢您提供此解决方案。您在文档中找不到这么简单的。 x

【解决方案2】：

您可以拥有自定义功能

 <Tab.Screen
      name="Add"
      component={View}
      listeners={({ navigation }) => ({
        tabPress: (e) => {
          // Prevent default action
          e.preventDefault();

          // Do something with the `navigation` object
          navigation.navigate("PhotoNavigation"); // Here!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        },
      })}
    />
<Tab.Screen name="Notifications" component={Notifications} />

【讨论】：

这是官方的解决方案。竖起大拇指！