React导航模式V6与expo

Question

你好，我试着用react-navigation 6来显示一个模态:"modal"按照文件上的规定。但它没有给我想要的输出。模态不是作为模态显示，而是作为普通的导航屏幕显示。下面我用一种简单的方式重现了同样的问题。提前谢谢:).

import React, { FC } from "react";
import { View, Text, TouchableOpacity, Button } from "react-native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
interface Props {
// navigation :
}
const Tab = createMaterialBottomTabNavigator();
const Stack = createNativeStackNavigator();
const Home: FC = ({ navigation }) => {
return (
<View>
<Text>Welcome Home</Text>
<TouchableOpacity onPress={() => navigation.navigate("Details")}>
<Text>Move to Details without tabs</Text>
</TouchableOpacity>
</View>
);
};
const Details: FC = ({ navigation }) => {
return (
<View>
<Text>Welcome Details</Text>
<Button
onPress={() => navigation.navigate("MyModal")}
title="Open Modal"
/>
</View>
);
};
const ViewDetails: FC = (props: Props) => {
return (
<View>
<Text>Welcome ViewDetails</Text>
</View>
);
};
const Feed: FC = (props: Props) => {
return (
<View>
<Text>Welcome Feed</Text>
</View>
);
};
const Profile: FC = (props: Props) => {
return (
<View>
<Text>Welcome Profile</Text>
</View>
);
};
const HomeTab: FC = (props: Props) => {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
);
};
function ModalScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text style={{ fontSize: 30 }}>This is a modal!</Text>
<Button onPress={() => navigation.goBack()} title="Dismiss" />
</View>
);
}
const RootStackNavigator = (props: Props) => {
return (
<Stack.Navigator>
<Stack.Screen name="HomeTab" component={HomeTab} />
<Stack.Screen name="Details" component={Details} />
<Stack.Screen name="ViewDetails" component={ViewDetails} />
<Stack.Group screenOptions={{ presentation: "modal" }}>
<Stack.Screen name="MyModal" component={ModalScreen} />
</Stack.Group>
</Stack.Navigator>
);
};
export default RootStackNavigator;
please ignore the types as I purposely omitted them to quickly recreate this code snippet.

Answer 1

我发现的是，如果你想创建完全隐藏标签栏的全模式屏幕，你必须将它们分组到一个新组中。例如,

<Stack.Group screenOptions={{presentation: 'fullScreenModal'}}>
<Stack.Screen name="Modal" component={ModalScreen} />
</Stack.Group>

这个叫做Modalscreen的屏幕将显示为一个完整的模式屏幕，为你隐藏标签栏。