React Native 如何导航到子文件夹中的页面

Question

我是 React Native (0.71.8) 的新手，我有一个非常基本的设置，但我似乎无法导航到子文件夹中的页面。这是我的布局：

app
  _layout.tsx
  (screens)
    home.tsx
    about.tsx
    movies
     _layout.tsx
     comedy
      _layout.tsx

在应用程序> _layout.tsx中我有一个抽屉.navigator

<Drawer.Navigator>
  <Drawer.Screen name='(screens)/home' component={HomeScreen} /> <-- works
  <Drawer.Screen name='(screens)/about' component={AboutScreen} /> <-- works
  <Drawer.Screen name='(screens)/movies' component={MoviesScreen} /> <-- works
  <Drawer.Screen name='(screens)/movies/comedy' component={ComedyScreen} /> <-- BROKEN
</Drawer.Navigator>

我的错误是： 未找到路线“（屏幕）/电影/喜剧”的模式

我如何链接到：屏幕）/电影/喜剧？

谢谢

Answer 1

看起来您的 Drawer.Navigator 中已经嵌套了堆栈。

import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from '../screens/home';
import AboutScreen from '../screens/about';
import MoviesNavigator from './movies/_layout';

const Drawer = createDrawerNavigator();

const AppNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name='Home' component={HomeScreen} />
      <Drawer.Screen name='About' component={AboutScreen} />
      <Drawer.Screen name='Movies' component={MoviesNavigator} />
    </Drawer.Navigator>
  );
};

export default AppNavigator;

这是一个 movie/_layout.tsx，用于堆叠您的电影屏幕，就像它是嵌套堆栈的另一个堆栈一样

import { createStackNavigator } from '@react-navigation/stack';
import MoviesScreen from './movies';
import ComedyNavigator from './comedy/_layout';

const Stack = createStackNavigator();

const MoviesNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name='Movies' component={MoviesScreen} />
      <Stack.Screen name='Comedy' component={ComedyNavigator} />
    </Stack.Navigator>
  );
};

export default MoviesNavigator;

电影/喜剧/_layout.tsx

import { createStackNavigator } from '@react-navigation/stack';
import ComedyScreen from './comedy';

const Stack = createStackNavigator();
const ComedyNavigator = () => {
      return (
        <Stack.Navigator>
          <Stack.Screen name='Comedy' component={ComedyScreen} />
          {/* You can add more screens for comedy if you wanna*/}
        </Stack.Navigator>
      );
    };
    
export default ComedyNavigator;

如果想导航到喜剧屏幕，那么这就是您钻取其他堆栈进行导航的方式

 navigation.navigate('Movies', { screen: 'Comedy' });

使用此链接进行更多了解 https://reactnavigation.org/docs/screen-options-resolution/