React Navigation 6 (RN6) - 模态内的卡片堆栈

Question

我对模态堆栈中的卡片堆栈有疑问，如附图所示。

所以，只是重复我想做的事情。我有一个 screen 选项 presentation: 'modal' 打开绿色模式。

在那个绿色模式中，我有一个按钮应该调用一个导航调用，它应该显示蓝色 screen 和选项 presentation: 'card' 并且能够返回到绿色屏幕。

我已经用 WIX 的 react-native-navigation 库做了类似的事情，但我不知道是否可以用 react-navigation 来完成。

非常感谢任何帮助。

干杯

Answer 1

我找到 Nesting navigators 的解决方案 here

基本上，我创建了一个 ModalStack 并在 Screen 组件中使用了这个堆栈，如下所示。

import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { TransitionPresets } from '@react-navigation/stack'

import HomeView from '../screens/HomeView'
import ModalView from '../screens/ModalView'
import CardView from '../screens/CardView'

const RootStack = createNativeStackNavigator()
const ModalStack = createNativeStackNavigator()

const ModalStackView = () => (
  <ModalStack.Navigator
    screenOptions={{
      headerShown: true,
    }}>
    <ModalStack.Screen
      name="modalCard1"
      component={ModalView}
      options={{
        presentation: 'modal'
      }}
    />
    <ModalStack.Screen
      name="modalCard2"
      component={CardView}
      options={{
        presentation: 'card'
      }}
    />
  </ModalStack.Navigator>
)

const Stacks = () => (
  <RootStack.Navigator
    screenOptions={{
      headerShown: false,
    }}>
    <RootStack.Screen name="home" component={HomeView} />
    <RootStack.Screen
      name="modal"
      component={ModalStackView}
      options={{
        presentation: 'modal'
      }}
    />
  </RootStack.Navigator>
)

export default Stacks

这里是Snack with the full code

React Navigation 6 (RN6) - 模态内的卡片堆栈

React Navigation 6 (RN6) - Card stack within a modal

react-navigation-v6