react-native - 有什么办法可以将 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>
  );
}

标签： react-nativereact-navigationreact-navigation-stackreact-navigation-v5