React Navigation modal V6 with expo答案

【问题标题】：React Navigation modal V6 with expoReact Navigation modal V6 with expo
【发布时间】：2021-12-10 12:26:11
【问题描述】：

美好的一天，我尝试使用 react-navigation 6 来显示一个模态，使用 docs 上指定的演示文稿：“模态”。但它没有给我想要的输出。模态不会显示为模态，而是显示为正常的导航屏幕。下面我以简单的方式重新创建了相同的问题。在此先感谢:)。

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.

【问题讨论】：

你能检查这是否有任何帮助stackoverflow.com/a/69311496/7337506。
感谢您的回复，但仍然无法正常工作。我不知道是不是因为我使用的是库的 v6，而且它也是 android。
我猜 v6 不是问题，但 @react-navigation/native-stack 是。请记住@react-navigation/stack 具有所有功能和自定义。另一方面，@react-navigation/native-stack 为堆栈提供了它在每个平台上的行为方式。你能把@react-navigation/native-stack换成@react-navigation/stack再试一次吗？
好的，谢谢，我现在就试试。
同样的问题，你找到什么了吗？

标签： typescript react-native expo react-navigation

【解决方案1】：

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

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

这个名为 Modalscreen 的特定屏幕将显示为一个完整的模式屏幕，为您隐藏标签栏。

【讨论】：