react-navigation-v6 - React Navigation 6 (RN6) - 模态中的卡片堆栈

Question

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

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

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

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

任何帮助深表感谢。

干杯

标签： react-navigation-v6

Answer 1

我找到了这里Nesting navigators描述的解决方案

基本上，我创建了一个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

这是带有完整代码的小吃