获取未定义不是抽屉导航中的函数（评估'（0，_reactNavigation.stacknavigator）'）
Posted
技术标签:
【中文标题】获取未定义不是抽屉导航中的函数（评估\'（0，_reactNavigation.stacknavigator）\'）【英文标题】：getting undefined is not a function (evaluating '(0,_reactNavigation.stacknavigator)') in drawer navigation获取未定义不是抽屉导航中的函数（评估'（0，_reactNavigation.stacknavigator）'） 【发布时间】：2019-04-22 15:07:26 【问题描述】：在我的应用程序中，我需要抽屉式导航，为此我使用来自this 的示例代码。我已将所有内容集成到我的应用程序中，但出现以下错误
undefined 不是函数（评估 '(0,_reactNavigation.stacknavigator)')
也安装了这个。
npm install react-navigation --save
但是不知道为什么会出现这个错误，所以请指导我如何解决这个问题。
这是我的 app.js
import React, Component from 'react';
import StyleSheet , Platform , View , Text , Image ,
TouchableOpacity , YellowBox from 'react-native';
import DrawerNavigator, StackNavigator from 'react-navigation';
class NavigationDrawerStructure extends Component
//Structure for the navigatin Drawer
toggleDrawer = () =>
//Props to open/close the drawer
this.props.navigationProps.toggleDrawer();
;
render()
return (
<View style= flexDirection: 'row' >
<TouchableOpacity onPress=this.toggleDrawer.bind(this)>
/*Donute Button Image */
<Image
source=require('./image/drawer.png')
style= width: 25, height: 25, marginLeft: 5
/>
</TouchableOpacity>
</View>
);
class Screen1 extends Component
//Screen1 Component
render()
return (
<View style=styles.MainContainer>
<Text style= fontSize: 23 > Screen 1 </Text>
</View>
);
class Screen2 extends Component
//Screen2 Component
render()
return (
<View style=styles.MainContainer>
<Text style= fontSize: 23 > Screen 2 </Text>
</View>
);
class Screen3 extends Component
//Screen3 Component
render()
return (
<View style=styles.MainContainer>
<Text style= fontSize: 23 > Screen 3 </Text>
</View>
);
const FirstActivity_StackNavigator = StackNavigator(
//All the screen from the Screen1 will be indexed here
First:
screen: Screen1,
navigationOptions: ( navigation ) => (
title: 'Screen1',
headerLeft: <NavigationDrawerStructure navigationProps=navigation />,
headerStyle:
backgroundColor: '#FF9800',
,
headerTintColor: '#fff',
),
,
);
const Screen2_StackNavigator = StackNavigator(
//All the screen from the Screen2 will be indexed here
Second:
screen: Screen2,
navigationOptions: ( navigation ) => (
title: 'Screen2',
headerLeft: <NavigationDrawerStructure navigationProps=navigation />,
headerStyle:
backgroundColor: '#FF9800',
,
headerTintColor: '#fff',
),
,
);
const Screen3_StackNavigator = StackNavigator(
//All the screen from the Screen3 will be indexed here
Third:
screen: Screen3,
navigationOptions: ( navigation ) => (
title: 'Screen3',
headerLeft: <NavigationDrawerStructure navigationProps=navigation />,
headerStyle:
backgroundColor: '#FF9800',
,
headerTintColor: '#fff',
),
,
);
const DrawerNavigatorExample = DrawerNavigator(
//Drawer Optons and indexing
Screen1: //Title
screen: FirstActivity_StackNavigator,
,
Screen2: //Title
screen: Screen2_StackNavigator,
,
Screen3: //Title
screen: Screen3_StackNavigator,
,
);
export default DrawerNavigatorExample;
const styles = StyleSheet.create(
MainContainer:
flex: 1,
paddingTop: 20,
alignItems: 'center',
marginTop: 50,
justifyContent: 'center',
,
);
这是 package.json
"name": "DrawerNavigation",
"version": "0.0.1",
"private": true,
"scripts":
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
,
"dependencies":
"react": "16.6.1",
"react-native": "0.57.5",
"react-native-vector-icons": "^6.1.0",
"react-navigation": "^3.0.0"
,
"devDependencies":
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.49.2",
"react-test-renderer": "16.6.1"
,
"jest":
"preset": "react-native"
如果我按照下面的示例也得到同样的错误。
https://medium.com/@mehulmistri/drawer-navigation-with-custom-side-menu-react-native-fbd5680060ba
请大家帮忙
【问题讨论】：
我们如何在不检查您的代码的情况下提供帮助？所以请更详细地提出问题。 将 stacknavigator 替换为 StackNavigator 或 createStackNavigator，大小写很重要！ 【参考方案1】：我希望这个对你有帮助，它对我有帮助！
App.js
import createStackNavigator, createAppContainer from 'react-navigation';
import HomeScreen from './yourScreenPath';
const AppNavigator = createStackNavigator(
Home: screen: HomeScreen
);
export default createAppContainer(AppNavigator);
查看链接：React Navigation
编辑：
较新版本没有createStackNavigator，现在可以在React Navigation Stack找到该功能。
【讨论】：
你应该解释步骤和你的代码，而不是只发布代码作为答案。 这个信息对于遇到这个问题的人来说已经足够了！这就是我没有解释的原因！ 我的意思是你需要写一些我不想说你写很大的解释的词。我认为现在是正确的。 根据下面的另一条评论，这可能是因为 React-navigation 2.x 和 3.x 之间发生了变化。【参考方案2】：使用createStackNavigator 代替stackNavigator。
【讨论】：
【参考方案3】：我偶然发现了这一点，因为我遇到了同样的错误消息。除了createStackNavigator 而不是StackNavigator。问题是我升级到 3.x，而 3 中的新功能是 createAppContainer。
现在，而不是
export default DrawerNavigatorExample;
你需要
export default createAppContainer(DrawerNavigatorExample)
希望这可以节省我花在研究上的时间：/
link to docs
【讨论】：
【参考方案4】：# Use of react-navigation (3.x) version ^3.0.0 #
import
createDrawerNavigator,
createStackNavigator,
createBottomTabNavigator,
createAppContainer,
from 'react-navigation';
const AppNavigator = createStackNavigator(
Home: screen: HomeScreen
);
export default createAppContainer(AppNavigator);
【讨论】：
请花一些时间通过添加一些解释来改进您的答案，以便更好地理解您的解决方案为何有效。【参考方案5】：只需运行下面的代码
npm install @react-navigation/native
之后它会摇滚
【讨论】：
感谢 ram 成功【参考方案6】：替换此代码：
import createDrawerNavigator, createStackNavigator from 'react-navigation';
通过这个项目的导入：
import DrawerNavigator, StackNavigator from 'react-navigation';
希望对你有帮助！
【讨论】：
这里我使用的是 StackNavigator，如果我在上面进行了更改，则无法找到变量：StackNavigator 检查您的代码并查看您在哪里使用 StackNavigator 并将其替换为 createStackNavigator 我不确定但应该会有所帮助 好的，你链接你的依赖了吗？像这样：react-native 链接和：react-native 链接 react-navigation 检查上面的 app.json 文件 未解决，尝试了此示例 medium.com/@mehulmistri/… 但得到了同样的错误【参考方案7】：在 package.json 中编辑 react-navigation 到 '^2.17.0' NEXT 重启你的电脑
【讨论】：
另一种解决方案，将 react-navigation 降级到 2.17.0 版本【参考方案8】：参考反应导航步骤然后很容易。 访问https://reactnavigation.org/docs/en/hello-react-navigation.html
import React from 'react';
import View, Text, Button from 'react-native';
import createAppContainer from 'react-navigation';
import createStackNavigator from 'react-navigation-stack';
class HomeScreen extends React.Component
render()
return (
<View style= flex: 1, alignItems: 'center', justifyContent: 'center' >
<Text>Home Screen</Text>
<Button
title="Go to Profile... again"
onPress=() => this.props.navigation.push('Profile')
/>
</View>
);
class ProfileScreen extends React.Component
render()
return (
<View style= flex: 1, alignItems: 'center', justifyContent: 'center' >
<Text>Profile Screen</Text>
<Button
title="Go to Home"
onPress=() => this.props.navigation.navigate('Home')
/>
<Button
title="Go back"
onPress=() => this.props.navigation.goBack()
/>
</View>
);
const AppNavigator = createStackNavigator(
Home: HomeScreen,
Profile: ProfileScreen
,
initialRouteName: 'Home',
);
const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component
render()
return <AppContainer />;
【讨论】：
【参考方案9】：这个问题可能是因为没有安装 android SDK 平台 25 这样做：
-
打开 Android Studio
打开 SDK 管理器
单击 SDK 平台选项卡
选择android 7.1.1 (Nougat) API 级别为25
申请
安装后按 OK 并再次尝试构建项目。
【讨论】：
【参考方案10】：您可以在此处查看此示例代码： https://snack.expo.io/@eriveltonelias/stack-actions
我认为问题是：
-
使用 stackNavigator，您应该使用 createStackNavigator
(https://reactnavigation.org/docs/en/stack-navigator.html)
和
使用 createDrawerNavigator (https://reactnavigation.org/docs/en/drawer-navigator.html) 代替抽屉导航器
【讨论】：
【参考方案11】：你必须为所有类使用 React.Component 而不是 Component。我也遇到了同样的问题，它现在正在使用这个小修复
class Screen2 extends React.Component
//Screen2 Component
render()
return (
<View style=styles.MainContainer>
<Text style= fontSize: 23 > Screen 2 </Text>
</View>
);
【讨论】：
【参考方案12】：试试
npm i react-navigation@1.0.0-beta.23
【讨论】：
【参考方案13】：我遇到了同样的错误。问题在于我的导入语句
import createStackNavigator from 'react-navigation-stack';
必须
import createStackNavigator from 'react-navigation-stack';
【讨论】：
以上是关于获取未定义不是抽屉导航中的函数（评估'（0，_reactNavigation.stacknavigator）'）的主要内容，如果未能解决你的问题，请参考以下文章
TypeError：未定义不是对象（评估“navigation.navigate”），无法从放置在屏幕上的组件导航到另一个屏幕
未定义不是对象（评估'_reactNative.Stylesheet.create'）[关闭]
未定义不是对象（评估 '_reactNativeCamer.RNCamera.Constants'
TypeError：未定义不是对象（评估'_ref.state）
未处理的承诺拒绝：未定义不是对象（评估 _expoLocation.requestForegroundPermissionsAsync）