是否可以使用带有反应导航（v5）的 UIModalPresentationPageSheet 或 UIModalPresentationFormSheet 样式呈现模态？

Question

根据 Apple documentation，在 iOS 13 上呈现模式默认为 UIModalPresentationAutomatic，通常映射到 UIModalPresentationPageSheet 样式。

类似地，react-native-screens appears to support the various options, but I've so far been unable to determine if it's possible pass this with react-navigation, or if react-navigation is using this code path at all. react-native-screens appears to default 到 UIModalPresentationAutomatic，这让我相信 react-navigation 完全在做其他事情。

是否可以在 Stack.Navigator 中使用这些较小的模态类型来呈现这些 Stack.Screen 组件？

这是一个演示该问题的简单 React Native 应用程序。

import "react-native-gesture-handler"
import * as React from "react"
import { Button, View, Text } from "react-native"
import { NavigationContainer } from "@react-navigation/native"
import { createStackNavigator } from "@react-navigation/stack"
function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate("Details")}
      />
    </View>
  )
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Details Screen</Text>
    </View>
  )
}

const Stack = createStackNavigator()

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        mode="modal"
        initialRouteName="Home"
        screenOptions={{
          stackPresentation: "formSheet",
        }}
      >
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

export default App

无论指定stackPresentation如何，它始终以全屏模式呈现。如何获得 UIModalPresentationFormSheet 行为？

Answer 1

您“只”需要直接从 react-native-screens 使用 createNativeStackNavigator 函数。 react-navigation docs 实际上有一节描述了如何设置它。

对于上面的示例应用程序，您只需导入所需的两个函数并将堆栈初始化更改为如下所示

import { createNativeStackNavigator } from 'react-native-screens/native-stack'
import { enableScreens } from 'react-native-screens'

enableScreens()
const Stack = createNativeStackNavigator()

然后在 Stack.Navigator 组件中设置适当的 screenOptions。

<Stack.Navigator
  initialRouteName="Home"
  screenOptions={{ 
    headerShown: false, 
    stackPresentation: 'formSheet' 
  }}
>

是否可以使用带有反应导航（v5）的 UIModalPresentationPageSheet 或 UIModalPresentationFormSheet 样式呈现模态？

Is it possible to present modals with the UIModalPresentationPageSheet or UIModalPresentationFormSheet style with react-navigation (v5)?

reactjs

react-native

react-navigation

react-navigation-v5