有什么办法可以将TabBar放在标题上

Question

我在设计中有了一个主意，但事实证明，使之难以想象。设计如下：

此处的标签栏是使用'createMaterialTopTabNavigator'创建的。 我的想法是渐变部分将成为标题，因此从INFO导航到PHOTOS时它不会移动。除了TopTabNavigator与标题重叠之外，我可以按上面图片中的方式显示屏幕。它看起来如下：

我确实理解为什么会发生这种情况，因为topTabNavigator在stackNavigator内部，因此标头将始终位于顶部。问题是，我希望通过topTabNavigator向左或向右滑动时，渐变部分保持在原位。

个人资料堆栈屏幕：

const ProfileStackScreen = ({ navigation }) => { 
  return (
    <ProfileStack.Navigator>
      <ProfileStack.Screen name="Profile" component={ProfileTabScreen} options={{ 
        header: () => ( <ProfileHeader onPress={() => {navigation.openDrawer()}} />)
      }} />
    </ProfileStack.Navigator>
  );
};

标题：

const ProfileHeader = (props) => {
  return (
    <LinearGradient colors={[color1, color2]}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 1 }}
      style={{
        width: '100%,
        alignItems: 'center',
        paddingVertical: 50,
     }}>

       <View style={{width: '100%}}>
         <View style={{
           flexDirection: 'row',         
           alignItems: 'center',
           justifyContent: 'space-between',
           paddingHorizontal: 20,
           width: '100%',
       }}>
         <TouchableOpacity><Icon /></TouchableOpacity>

         <TouchableOpacity><Text>Edit profile</Text></TouchableOpacity>
       </View>
     </View>
 
     <Image style={{height: 115, width: 115, borderRadius: 100}} source={require('../path/img.jpg')} />
   </LinearGradient>
  );
}