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

那我有正在调用AppStackNavigator.js的AppNavigator.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知道是否需要其他任何信息以更好地理解。谢谢。

Answer 1

您必须将2个参数传递给navigate函数。第一个应该是Root的名称，第二个应该是包含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/

Answer 2

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

如何在react native中创建嵌套的stacknavigator？

2 个答案: