在堆栈导航器之上创建新的堆栈导航器

Question

在 iOS 术语中，例如，我想在 UINavigationController A 之上呈现 UINavigationController B

1. 用户单击主页中的按钮，该按钮通过呈现UINavigationController B（新堆栈）来启动流程
2. 关闭此UINavigationController B 将删除显示的堆栈并将用户带回主页

代码看起来像这样

let navController = UINavigationController(rootViewController: destination)
source.present(navController, animated: animated, completion: completion)

source        -> UINavigationController A
navController -> UINavigationController B

如何在 React Native 中使用 React Navigation 实现这一点？

Answer 1

这种导航通常完成的方法是创建一个组件，其中包含您的NavigationController B 作为NavigationController A 上的路由

类似这样的：

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';

import Dashboard from '../pages/Dashboard';
import Invoices from '../pages/Invoices';
import Profile from '../pages/Profile';
import Contacts from '../pages/Contacts';

const App = createStackNavigator();

const User = createStackNavigator();

const UserRoutes: React.FC = () => (
  <User.Navigator>
    <User.Screen name="Profile" component={Profile} />
    <User.Screen name="Contacts" component={Contacts} />
  </User.Navigator>
)

const AppRoutes: React.FC = () => (
  <App.Navigator>
    <App.Screen name="Dashboard" component={Dashboard} />
    <App.Screen name="User" component={UserRoutes} />
  </App.Navigator>
);

export default AppRoutes;

上面的例子是使用 React Navigation v5 和 Typescript。

您可以创建任何类型的导航嵌套然后作为路线。