Как создать вложенные стек-навигаторы в React Native?

Question

Я хочу создать свою файловую систему как: AppStackNavigator. js

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

import PropertyAndGuestScreen from '../screens/PropertyAndGuest/PropertAndGuestScreen';
import LocationScreen from '../screens/LocationScreen';
import AmenitiesScreen from '../screens/AmentiesScreen';
import TitleScreen from '../screens/TitleScreen';

const Stack = createStackNavigator();

const PropertyAndGuestStack = () => {
  <Stack.Navigator
    screenOptions={{
      headerShown: false,
    }}>
    <Stack.Screen name="PropertyAndGuest" component={PropertyAndGuestScreen} />
  </Stack.Navigator>;
};

const LocationStack = () => {
  <Stack.Navigator
    screenOptions={{
      headerShown: false,
    }}>
    <Stack.Screen name="Location" component={LocationScreen} />
  </Stack.Navigator>;
};

const AmenitiesStack = () => {
  <Stack.Navigator
    screenOptions={{
      headerShown: false,
    }}>
    <Stack.Screen name="Amenity" component={AmenitiesScreen} />
  </Stack.Navigator>;
};

const TitleStack = () => {
  <Stack.Navigator
    screenOptions={{
      headerShown: false,
    }}>
    <Stack.Screen name="Title" component={TitleScreen} />
  </Stack.Navigator>;
};

const AppStackNavigator = () => {
  <Stack.Navigator
    screenOptions={{
      headerShown: false,
    }}>
    <Stack.Screen
      name="PropertyAndGuestStack"
      component={PropertyAndGuestStack}
    />
    <Stack.Screen name="LocationStack" component={LocationStack} />
    <Stack.Screen name="AmenitiesStack" component={AmenitiesStack} />
    <Stack.Screen name="TitleStack" component={TitleStack} />
  </Stack.Navigator>;
};

export default AppStackNavigator

тогда у меня есть AppNavigator. js где я вызываю AppStackNavigator. js

import * as React from 'react'
import AppStackNavigator from './AppStackNavigator';
import ListScreen from '../screens/ListScreen';
import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();

const AppNavigator = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: null,
      }}>
      <Stack.Screen name="List" component={ListScreen} />
      <Stack.Screen name="AppStackNavigator" component={AppStackNavigator} />

    </Stack.Navigator>
  );
};

export default AppNavigator

и, наконец, у меня есть App. js, где я хочу вызвать AppNavigator. js

import 'react-native-gesture-handler';
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import AppNavigator from './src/navigation/AppNavigator';

export default class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <AppNavigator />
      </NavigationContainer>
    );
  }
}

Однако, когда я, наконец, пытаюсь перейти на определенную страницу в качестве PropertandGuest, например

this.props. navigation.navigate('PropertyAndGuest')

Это говорит о том, что экран не существует, однако вы можете ясно видеть в приведенном выше коде, что экран действительно существует. И я хочу создать отдельный стек для каждого, потому что в отдельный стек нужно добавить гораздо больше экранов. Ошибка выглядит следующим образом:

 The action 'NAVIGATE' with payload {"name":"PropertyAndGuest"} was not handled by any navigator.

Do you have a screen named 'PropertyAndGuest'?

Пожалуйста, дайте мне знать, где я ошибаюсь? И дайте мне знать, если что-то еще требуется для лучшего понимания. Спасибо.

Answer 1

исправили указанную выше ошибку, благодаря @Chandradeepta, вам нужно создать навигаторы стека для всех экранов, а затем вложить их, чего я не делал, а также необходимо возвращать каждую функцию стека.

Answer 2

Вы должны передать 2 параметра функции navigate. Первым должно быть имя Root, а вторым - объект, который включает свойство screen и свойство params с именем экрана, который вы хотите отобразить, а также Stack.Navigator должен быть возвращен из функций.

Попробуйте это,

this.props.navigation.navigate('AppStackNavigator',{ screen: 'PropertyAndGuestStack', params: {
screen: 'PropertyAndGuest', })

Примечание: если вы не предоставили более одного экрана в своем стеке, просто позвоните с именем root.

this.props.navigation.navigate('AppStackNavigator')

прочтите документы.

https://reactnavigation.org/docs/nesting-navigators/