标签导航器和后退按钮未显示在堆栈导航器中

Question

我正在使用 React Native 开发移动应用。到目前为止，我一直在尝试将 Tab Navigator 嵌套在 Stack Navigator 中，但由于 Tab Navigator 没有显示在我的移动应用底部，因此无法按预期工作。

这是我的代码：

App.js：

/*COMPONENTS*/
import HomePage from "./screens/HomePage";
import Advice from "./screens/Advice";
import Test from "./screens/Test";
/**/

const Tab = createBottomTabNavigator();

function MyTabs() { /*I only want "HomePage" and "Advice" screens in the tab navigator*/
  return (
    <Tab.Navigator> 
      <Tab.Screen
        name="HomePage"
        component={HomePage}
        screenOptions={{
          HomePage
        }} />
      <Tab.Screen 
      name="Advice" 
      component={Advice} 
      screenOptions={{
        Advice
      }} />
    </Tab.Navigator>
  );
}

const Stack = createStackNavigator();
function MyStack() {
  return (
    <Stack.Navigator style={{ alignItems: "center" }}
      screenOptions={{
        headerStyle: {
          backgroundColor: "#783931FF",
        },
        headerTintColor: "#fff",
        headerTitleStyle: {
          fontWeight: "bold",
        },
        headerTitleAlign: {
          alighItems: "center",
        }
      }}
    >
      <Stack.Screen style={{ flex: 1, justifyContent: "flex-end" }}
        name="HomePage"
        component={HomePage}
        options={{
          title: "HomePage",
        }} />
        <Stack.Screen style={{ flex: 1, justifyContent: "flex-end" }}
        name="Advice"
        component={Advice}
        options={{
          title: "Advice",
        }} />
        <Stack.Screen style={{ flex: 1, justifyContent: "flex-end" }}
        name="Test"
        component={Test}
        options={{
          title: "Test",
        }} />
        <Stack.Screen style={{ flex: 1, justifyContent: "flex-end" }}
          name="MyTabs"
         component={MyTabs}
         options={{
          title: "MyTabs",
        }}/>
    </Stack.Navigator>
  );
}


export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );

}

HomePage.js

    const HomePage = (props) => {
    return (
        <SafeAreaView style={{ flex: 1, backgroundColor: "white" }}>
            <View
                style={{
                    borderBottomColor: '#E0E7DF',
                    borderBottomWidth: 0.5,
                }}
            />
            <View>
                <View>
                    <TouchableOpacity
                        title="Advice"
                        onPress={() => {
                            props.navigation.navigate("Advice", {
                            });
                        }}>
                        <Text style={styles.text}>
                            Advice
                             </Text>
                    </TouchableOpacity>
                </View>
            </View>
        </SafeAreaView >
    )
}

export default HomePage

const styles = StyleSheet.create({

    text: {
        alignItems: "center",
        justifyContent: "center",
        textAlign: "center",
        color: "black",
        paddingBottom: 5,
        fontWeight: "bold",
    }
})

Advice.js

const Advice = (props) => {
    return (
        <View>
            <TouchableOpacity
                title="Test"
                onPress={() => {
                    props.navigation.navigate("Test", {
                    });
                }}>
                <View>
                    <Text>
                        to the Test screen
                     </Text>
                </View>
            </TouchableOpacity>
        </View>
    )
}

export default Advice

Test.js

const Test = () => {
    return (
        <View>
            <Text>TEST</Text>
        </View>
    )
}

export default Test

话虽如此，如果我将包含 Tab Navigator 的 Stack Screen 移动到 Stack Navigator 中所有其他 Stack Screen 之上，底部 Tab Navigator 确实会出现，但“Advice”屏幕内的后退按钮消失了。我究竟做错了什么 ？感谢您的帮助。