Dans mon application, j'ai besoin d'une navigation dans les tiroirs. Pour cela, j'utilise un exemple de code provenant de this . J'ai tout intégré dans mon application mais j'obtiens l'erreur suivante
indéfini n'est pas une fonction (évaluer '(0, _reactNavigation.stacknavigator)')
Et installé celui-ci aussi.
npm installe react-navigation --save
Mais je ne sais pas pourquoi cette erreur est à venir, alors s'il vous plaît guidez-moi comment résoudre ce problème.
C'est mon 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',
},
});
Et c'est 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"
}
}
Si je suis échantillon ci-dessous obtenant également la même erreur.
https://medium.com/@mehulmistri/drawer-navigation-with-custom-side-menu-react-native-fbd5680060ba
N'importe qui peut aider s'il vous plait
Utilisez createStackNavigator au lieu de stackNavigator.
J'espère que celui-ci vous aidera, il m'a aidé!
App.js
import { createStackNavigator, createAppContainer } from 'react-navigation';
import HomeScreen from './yourScreenPath';
const AppNavigator = createStackNavigator({
Home: { screen: HomeScreen }
});
export default createAppContainer(AppNavigator);
Découvrez le lien: React Navigation
Vous devez utiliser React.Component au lieu de Component pour toutes les classes. Moi aussi j'ai fait face au même problème et ça marche maintenant avec ce correctif mineur
class Screen2 extends React.Component {
//Screen2 Component
render() {
return (
<View style={styles.MainContainer}>
<Text style={{ fontSize: 23 }}> Screen 2 </Text>
</View>
);
}
}
dans package.json, éditez react-navigation to '^ 2.17.0' SUIVANT redémarrez votre pc
Ce problème peut être dû à la plate-forme Android SDK pas installée 25 Faites ceci:
Après l’installation, appuyez sur OK et essayez à nouveau de construire le projet.
vous pouvez consulter cet exemple de code ici: https://snack.expo.io/@eriveltonelias/stack-actions
Je pense que le problème est:
Remplacez ce code:
import { createDrawerNavigator, createStackNavigator } from 'react-navigation';
Avec cette importation de votre projet:
import { DrawerNavigator, StackNavigator } from 'react-navigation';
j'espère que cela vous aidera!