Question

我对React Native还是很陌生的。在iOS或Android中加载模拟器时，出现以下错误：

undefined is not a function (near '...(0, _reactNavigation.StackNavigator)...')
<unknown>
    home-stack-navigator.js:7:2
loadModuleImplementation
    require.js:292:12
<unknown>
    App.js:4
loadModuleImplementation
    require.js:292:12
<unknown>
    AppEntry.js:2
loadModuleImplementation
    require.js:292:12
guardedLoadModule
    require.js:179:45
global code

我知道此错误已得到解决，并按照解决方案here，here和here进行了尝试，但到目前为止没有成功。

这里是home-stack-navigator.js：

import React from 'react';
import { StackNavigator } from 'react-navigation';
import HomeScreen from '../../components/screens/home-screen';
import ShowDetailsScreen from '../../components/screens/show-details-screen';

const HomeStackNavigator = StackNavigator(
  {
    Main: { screen: HomeScreen },
    ShowDetails: { screen: ShowDetailsScreen },
  },
  {
    initialRouteName: 'Main',
    headerMode: 'none',
  },
);

export default HomeStackNavigator;

还有App.js：

import React from 'react';
import { StatusBar } from 'react-native';
import { DrawerNavigator, DrawerItems } from 'react-navigation';
import HomeStackNavigator from './src/components/navigation/home-stack-navigator';
import { COLORS } from './src/constants/styles';
import styled from 'styled-components/native';

const DrawerContainer = styled.View`
  flex: 1;
  background-color: ${COLORS.GREY.BRIGHT_GREY};
`;

const AppContainer = styled.View`
  flex: 1;
  background-color: ${COLORS.GREY.BLACK_RUSSIAN};
`;

const drawerRouteConfig = {
  Home: {
    screen: HomeStackNavigator,
  },
};

const CustomDrawerContentComponent = props => (
  <DrawerContainer>
    <DrawerItems {...props} />
  </DrawerContainer>
);

const drawerNavigatorConfig = {
  contentComponent: props => <CustomDrawerContentComponent {...props} />,
};

const AppDrawer = DrawerNavigator(drawerRouteConfig, drawerNavigatorConfig);

export default class App extends React.Component {
  render() {
    return (
      <AppContainer>
        <StatusBar hidden={true} />
        <AppDrawer />
      </AppContainer>
    );
  }
}

我也正在使用expo作为构建器。任何建议将不胜感激。

新错误日志：

Invariant Violation: The navigation prop is missing for this navigator. In react-navigation 3 you must set up your app container directly. More info: https://reactnavigation.org/docs/en/app-containers.html

This error is located at:
    in Navigator (at App.js:41)
    in RCTView (at View.js:44)
    in StyledNativeComponent (created by ForwardRef)
    in App (at registerRootComponent.js:17)
    in RootErrorBoundary (at registerRootComponent.js:16)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)

Stack trace:
  node_modules/@react-navigation/core/dist/navigators/createNavigator.js:35:31 in getDerivedStateFromProps
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:7663:46 in applyDerivedStateFromProps
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:8270:6 in mountClassInstance
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:10480:8 in updateClassComponent
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14091:21 in performUnitOfWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14129:41 in workLoop
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14226:15 in renderRoot
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15193:17 in performWorkOnRoot
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15090:24 in performWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15047:14 in performSyncWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14925:19 in requestWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14711:16 in scheduleWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15429:15 in scheduleRootUpdate
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:16142:20 in render
  node_modules/react-native/Libraries/ReactNative/renderApplication.js:59:52 in renderApplication
  node_modules/react-native/Libraries/ReactNative/AppRegistry.js:101:10 in run
  node_modules/react-native/Libraries/ReactNative/AppRegistry.js:195:26 in runApplication
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:349:47 in __callFunction
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:106:26 in <unknown>
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:297:10 in __guard
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:105:17 in callFunctionReturnFlushedQueue

更新：

错误日志：

The component for route 'Home' must be a React component. For example:

import MyScreen from './MyScreen';

Home: MyScreen,

}

You can also use a navigator:

import MyNavigator from './MyNavigator';

Home: MyNavigator,

}

Answer 1

首先从createAppContainer导入react-navigation

import { DrawerNavigator, DrawerItems, createAppContainer } from 'react-navigation';

然后将HomeStackNavigator包装在createAppContainer

export const NavBarNavigation = createAppContainer(HomeStackNavigator);

然后将其导入您的app.js

React Native-未定义不是StackNavigator的功能问题

1 个答案: