堆栈导航器中的底部选项卡导航器

Question

所以我有一个常规导航器，有两个屏幕：主页和个人资料，它们都使用相同的底部标签栏。但是当用户转到与另一个用户的聊天页面时，我想更改底部标签栏，并在那里设置聊天控件。

  <NavigationContainer >
          <Tab.Navigator 
          tabBar={(props) => <>{<BottomTabBar {...props}/>}</>}
          tabBarOptions={{
              style: {
                backgroundColor: '#fff',
                position: 'absolute',
                left: 0,
                bottom: 0,
                right: 0,
                elevation: 0
              }

          }}
          
          screenOptions={({route})=> ({
            
            tabBarIcon: ({focused, color, size}) => {
              let iconName
              if(route.name === 'Home') {
                iconName = focused
                ?
                'chatbubble'
                :
                'chatbubble-outline'
              }
              else if (route.name === 'Profiles') {
                iconName = focused?'people':'people-outline'
              }
              return <Ionicons name={iconName} size={size} color={'#00bde7'}/>
            }
          })}>
            <Tab.Screen  name='Home' options={{tabBarBadge: 5, tabBarBadgeStyle: {color: '#fff', backgroundColor: '#000'}}} component={Home}/>
            <Tab.Screen name='Profiles' component={Profiles}/>
          </Tab.Navigator>
      </NavigationContainer>