在我的应用程序中,我需要抽屉式导航,因为我正在使用this中的示例代码。我已将所有内容集成到应用程序中,但出现以下错误
未定义不是函数(求值 '(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
任何人都可以帮助
答案 0 :(得分:14)
我希望这对您有帮助,对我有帮助!
App.js
import { createStackNavigator, createAppContainer } from 'react-navigation';
import HomeScreen from './yourScreenPath';
const AppNavigator = createStackNavigator({
Home: { screen: HomeScreen }
});
export default createAppContainer(AppNavigator);
查看链接:React Navigation
答案 1 :(得分:11)
使用createStackNavigator代替 stackNavigator 。
答案 2 :(得分:4)
我偶然发现了这个错误,因为我遇到了同样的错误消息。除了createStackNavigator
以外,还StackNavigator
。问题是我升级到3.x,而3中的新功能是createAppContainer
。
现在,代替
export default DrawerNavigatorExample;
您需要拥有
export default createAppContainer(DrawerNavigatorExample)
希望这可以节省我研究此时间所花费的其他时间:/
答案 3 :(得分:1)
请参阅反应导航步骤,这很容易。 访问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 />;
}
}
答案 4 :(得分:1)
只需运行下面的代码
npm install @react-navigation/native
然后它会摇滚
答案 5 :(得分:0)
替换此代码:
import { createDrawerNavigator, createStackNavigator } from 'react-navigation';
随着项目的导入:
import { DrawerNavigator, StackNavigator } from 'react-navigation';
希望对您有所帮助!
答案 6 :(得分:0)
此问题可能是由于尚未安装Android SDK平台25这样做:
安装后,按OK,然后再次尝试构建项目。
答案 7 :(得分:0)
您可以在此处查看以下示例代码: https://snack.expo.io/@eriveltonelias/stack-actions
我认为问题是:
答案 8 :(得分:0)
在package.json中,将react-navigation导航到'^ 2.17.0',然后重新启动计算机
答案 9 :(得分:0)
所有类都必须使用React.Component而不是Component。我也同样遇到了同样的问题,并且现在通过此次要修复功能可以解决该问题
class Screen2 extends React.Component {
//Screen2 Component
render() {
return (
<View style={styles.MainContainer}>
<Text style={{ fontSize: 23 }}> Screen 2 </Text>
</View>
);
}
}
答案 10 :(得分:0)
# 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);
答案 11 :(得分:0)
尝试
npm i react-navigation@1.0.0-beta.23
答案 12 :(得分:0)
我遇到了同样的错误。问题出在我的导入语句
import createStackNavigator from 'react-navigation-stack';
必须
import { createStackNavigator } from 'react-navigation-stack';