React Navigation 6 (RN6) - 模态中的卡片堆栈答案

【问题标题】：React Navigation 6 (RN6) - Card stack within a modalReact Navigation 6 (RN6) - 模态中的卡片堆栈
【发布时间】：2021-07-29 03:30:03
【问题描述】：

我有一个关于模态堆栈内的卡片堆栈的问题，如附图所示。

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

在那个绿色模式中，我有一个按钮应该调用导航调用，该调用应该显示蓝色 screen 和选项 presentation: 'card' 以及返回绿屏的能力。

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

非常感谢任何帮助。

干杯

【问题讨论】：

标签： react-navigation-v6

【解决方案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

【讨论】：