如何在本机反应中创建嵌套的堆栈导航器？答案

【问题标题】：How to create nested stacknavigators in react native?如何在本机反应中创建嵌套的堆栈导航器？
【发布时间】：2020-11-24 08:28:07
【问题描述】：

我想创建我的文件系统： 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'?

请告诉我哪里出错了？并且一定要让 mw 知道是否还需要其他任何东西来更好地理解。谢谢。

【问题讨论】：

在 AppStackNavigator.js 中，您需要为它们中的每一个创建单独的堆栈导航器。例如， const locationStack = createStackNavigator();常量设施堆栈 = createStackNavigator();等等。有关更多信息，请查看此reactnavigation.org/docs/screen-options-resolution

标签： reactjs react-native react-navigation react-navigation-stack react-navigation-v5

【解决方案1】：

您必须将 2 个参数传递给 navigate 函数。第一个应该是根的名称，第二个是一个对象，它包含screen 属性和params 属性以及您要显示的屏幕名称，并且应该从函数返回Stack.Navigator。

试试这个，

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

注意：如果您没有在堆栈中提供多个屏幕，则只需使用根名称进行调用。

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

阅读文档。

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

【讨论】：

我添加了一些更改，现在全部通过文档完成。

【解决方案2】：

已修复上述错误，感谢@Chandradeepta，您需要为所有屏幕创建堆栈导航器，然后嵌套它们，我没有这样做，而且每个堆栈函数都必须返回。

【讨论】：