Question

例如，在iOS中，我想在UINavigationController B上方显示UINavigationController A

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

代码看起来像这样

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

source        -> UINavigationController A
navController -> UINavigationController B

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

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。

您可以创建任何导航嵌套，然后将其作为Routes。

在堆栈导航器顶部创建新的堆栈导航器

1 个答案: