按下BottomTabNavigator上的Tab键，导航到屏幕

Question

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

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

例如，我在底部栏中有以下5个标签。我想按添加按钮时导航到 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>

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

问题：

1. 该选项卡处于打开状态时，是否仍可以导航到特定屏幕 按下？
2. 无论如何，有没有隐藏该“添加新内容”底部的标签栏 屏幕？

Answer 1

您可以拥有自定义功能

       var params = { 
            message: this.emial_name,   
            name: this.emial_email,
            email: this.emial_message
        }
        const config = {
            headers: { 
                'Content-Type': 'application/json',
                'Authorization': 'Token XXX',
                'Access-Control-Allow-Origin': '*',
             }
        }

       let res = await this.$axios.$post(`/email/`, params, config)

Answer 2

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

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

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

希望这会有所帮助。

Answer 3

我没有尝试过，但我认为... 您可以将bottomNavigator放在Stack Navigator中，然后单击加号图标。 您可以导航到AddNewItem屏幕。 如果它不起作用，那么您可以尝试以下替代方法：- 当您单击加号图标时。 它将您的bottomNavigator留在屏幕上，它将导航到屏幕。 然后，您可以在bottomNavigator屏幕上自动（强制）调用堆栈导航到AddNewItem屏幕的功能。