时间戳

首页 > 解决方案 > React Navigation modal V6 with expo

typescript - React Navigation modal V6 with expo

问题描述

美好的一天，我尝试使用 react-navigation 6 来显示模式，使用docs上指定的presentation: "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.

标签： typescriptreact-nativeexporeact-navigation

解决方案

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

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

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

推荐阅读