是否可以使用 react-navigation (v5) 以 UIModalPresentationPageSheet 或 UIModalPresentationFormSheet 样式呈现模式？

Posted 2023-03-15

【中文标题】是否可以使用 react-navigation (v5) 以 UIModalPresentationPageSheet 或 UIModalPresentationFormSheet 样式呈现模式？

【英文标题】：Is it possible to present modals with the UIModalPresentationPageSheet or UIModalPresentationFormSheet style with react-navigation (v5)?

【发布时间】：2020-06-09 12:48:15

【问题描述】：

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

类似地，react-native-screens appears to support 各种选项，但到目前为止我无法确定是否可以通过 react-navigation 传递它，或者 react-navigation 是否正在使用此代码路径。 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 行为？

【参考方案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' 
  
>