使用反应导航演示全屏模式时是否可以添加向下滑动？

Question

我使用反应导航并想要显示全屏模式。然后我就看到了这个帖子：

模态导航

效果很好，但是我可以在向下滑动时关闭模式吗？是否可以 ？当是的时候我该怎么做？

Answer 1

使用 Native Stack Navigator 时存在一些限制。其中之一是该手势仅在 iOS 上支持。请参阅本机堆栈导航器限制

Answer 2

您可以做的是用

GestureRecognizer

包装堆栈模式内容，并使用回调设置适当的事件，例如

() => props.navigation.goBack()

// navigator
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <View style={{ flex: 1 }}>
      <Stack.Navigator>
        <Stack.Group>
          <Stack.Screen name='list' component={ListScreen} />
          <Stack.Screen name='detail' component={DetailScreen} />
        </Stack.Group>
        <Stack.Group
          screenOptions={{
            presentation: 'modal',
            animation: 'slide_from_bottom'
          }}>
          <Stack.Screen name='session' component={ModalScreen} />
        </Stack.Group>
      </Stack.Navigator>
    </View>
  );
}


// modal content
import GestureRecognizer from 'react-native-swipe-gestures';
import { Button, Text, View } from 'react-native';

function ModalScreen(props: { navigation: any }) {
  return (
    <GestureRecognizer style={{ flex: 1 }} onSwipeDown={() => props.navigation.goBack()} onUpDown={() => props.navigation.goBack()}>
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text style={{ fontSize: 30 }}>This is a modal!</Text>
        <Button onPress={() => props.navigation.goBack()} title='Dismiss' />
      </View>
    </GestureRecognizer>
  );

Answer 3

你可以做什么，而不是使用可呈现的：“fullscreenmodal”使用普通屏幕

<Stack.Screen
    name='preview/[id]'
    options={{
      animation: 'slide_from_bottom',
      headerShown: false,
      gestureDirection: 'vertical',
    }}
  />