React Native Navigation - 在底部选项卡之间和上方共享视图

Question

使用 React Native Navigation 和 React Native Paper，我想在底部选项卡之间和上方共享一个视图（实例），例如下面的音乐播放器。

我的应用程序将在 Stack Navigator 中有一个 Tab Navigator，如下所示：

import * as React from "react";
import { Text, View, Button } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

function Stack2() {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text style={{ fontSize: 30 }}>Stack2 Screen</Text>
    </View>
  );
}

function Tab1({ navigation }) {
  return (
    <View
      style={{
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        gap: 10,
      }}
    >
      <Text style={{ fontSize: 30 }}>Stack1 Tab1 Screen</Text>
      <Button
        title="Go to Stack2"
        onPress={() => navigation.navigate("Stack2")}
      />
    </View>
  );
}

function Tab2({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text style={{ fontSize: 30 }}>Tab2 Screen</Text>
      <Button
        title="Go to Stack2"
        onPress={() => navigation.navigate("Stack2")}
      />
    </View>
  );
}

function TabNav() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Tab1" component={Tab1} />
      <Tab.Screen name="Tab2" component={Tab2} />
    </Tab.Navigator>
  );
}

function StackNav() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="TabNav" component={TabNav} />
        <Stack.Screen name="Stack2" component={Stack2} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default StackNav;