web-dev-qa-db-fra.com

Être indéfini n'est pas un objet évaluant _this.props.navigation

J'utilise DrawerNavigator et j'ai 3 pages: Router page, mainScreen et un photos page,
J'ai créé une zone de barre de navigation en-tête et j'ai utilisé This <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}> pour ouvrir le menu Tiroir dans mainScreen et utilisé également pour la page de photos, le menu est ok dans mainScreen, mais lorsque je clique sur <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}> dans la page de photos , J'ai eu cette erreur:  Photo
Comment puis-je résoudre ce problème? 

Ma page de photos:

import React from 'react';
import { Button, ScrollView, View, Text, StyleSheet, TouchableHighlight } from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Icon from 'react-native-vector-icons/FontAwesome'

const MyNavScreen = ({ navigation }) => (
  <View>
    <View style={styles.containerNavbar}>
      <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
        <Icon name="bars" size={30} color="#fff" />
      </TouchableHighlight>
      <Text style={styles.navbarTitle}>Photos</Text>
    </View>

    <ScrollView>
      <View><Text>photo</Text></View>
      <Button onPress={() => navigation.goBack(null)} title="Go back" />
    </ScrollView>
  </View>
);

const MyPhotosHomeScreen = ({ navigation }) => (
  <MyNavScreen navigation={navigation} />
);
MyPhotosHomeScreen.navigationOptions = {
  title: 'Photos',
  drawerIcon: ({ tintColor }) => (
    <MaterialIcons
      name="photo"
      size={24}
      style={{ color: tintColor }}
    />
  ),
};
export default MyPhotosHomeScreen;

écran principal:

export default class MainScreen extends React.Component {
    static navigationOptions = {
        drawerLabel: 'Home',
        drawerIcon: ({ tintColor }) => (
            <MaterialIcons
                name="home"
                size={24}
                style={{ color: tintColor }}
            />
        )
    };

    render() {
        return (
            <View>
                <View style={styles.containerNavbar}>
                    <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
                        <Icon name="bars" size={30} color="#fff" />
                    </TouchableHighlight>
                    <Text style={styles.navbarTitle}>mainScreen</Text>
                </View>

                <View>
                    <View style={styles.containerFooter}>
                        <Text style={styles.footerTitle}>Footer</Text>
                    </View>
                </View>
            </View>

        )
    }
}
react-nativereact-navigation
12
Sedric Heidarizarei

J'ignore peut-être quelque chose, mais cela ressemble à une simple erreur Javascript. Vous détruisez vos accessoires dans votre composant pur MyNavScreen:

const MyNavScreen = ({ navigation }) => (

Cela signifie que vous n'avez pas accès à this.props. Vous avez juste accès à la propriété déstructurée navigation. D'où la raison de l'erreur indéfinie car celle-ci est vraiment indéfinie:

<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>

Si vous le changez pour utiliser directement navigation, cela devrait fonctionner:

<TouchableHighlight onPress={() => navigation.navigate('DrawerOpen')}>

Sur mainScreen, tout va bien car ce n'est pas un composant pur avec des arguments déstructurés. Vous avez donc toujours accès à this.props dans render().

Vous devriez rafraîchir détruire si cela vous cause des problèmes.

9
Michael Cheng

Si vous utilisez TouchableOpacity/Height dans votre élément enfant, transmettez-le this.props.onPress comme ceci: 

<TouchableOpacity onPress={this.props.onPress}/>

Appelez ensuite la fonction onPress dans votre composant parent comme suit:

<Parent onPress={this.Handlepress} />
6
Kevin Kiwango

Cela a fonctionné pour moi

Dans mon cas, cela fonctionnait lorsque je liais this à la méthode qui appelle prop dans le constructeur.

constructor(props){
    super(props);
    this.showDetails = this.showDetails.bind(this);// you should bind this to the method that call the props
}

showDetails(_id){
    this.props.navigation.navigate('Details');
}

Ou utilisez simplement la fonction flèche

showDetails = (_id) => {
      this.props.navigation.navigate('Details');
}

car pendant que vous utilisez la fonction expression, il va créer sa propre portée .

4
bereket gebredingle

j'ai eu le même problème quand j'utilisais le composant d'en-tête

maintenant, vous pouvez utiliser la variable de navigation dans un autre composant comme celui-ci

<TouchableOpacity onPress={() => { this.props.navigation.navigate("Play");}}>

Bonne Codding :) 

2
user3499413

Essaye ça:

import { withNavigation } from 'react-navigation';

withNavigation sert les accessoires partout dans le projet/l'application, vous accédez aux accessoires de navigation de n'importe où. 

et 

onPress={() => this.props.navigation.navigate('DrawerOpen')}

Finalement, 

export default withNavigation(MyPhotosHomeScreen);

découvrez ceci https://reactnavigation.org/docs/fr/connecting-navigation-prop.html

2
sai teja

Voici comment je l'ai fait dans la version 2 de React Navigation: J'appelle la méthode openDrawer() depuis une StackNavigator qui est un navigateur enfant de DrawerNavigator.

C'est ma DrawerNavigator:

export const Drawer = DrawerNavigator(
    {
        MyAccount: {screen: TabsStack},
    });


export const TabsStack = StackNavigator({

    Tabs: {
        screen: Tabs, navigationOptions: ({navigation}) => ({
            headerLeft: (
                <TouchableOpacity style={{marginLeft: 10, marginTop: 3}}
                                  onPress={() => navigation.openDrawer()}>
                    <Image source={require('./assets/menu_h.png')}/>
                </TouchableOpacity>)
        })
1
Ahmad Wahaj

J'ai rencontré le même problème. C'est comme ça que j'ai résolu le problème: 

  1. Vérifiez que tous vos constructeurs ont "props" a argument
  2. Lier la fonction avec utiliser la fonction this.props.navigation.navigate dans le constructeur comme ceci: this.your_function = this.your_function.bind(this)
0
Jonathan Kashongwe

Si vous utilisez la navigation dans le composant enfant, n'oubliez pas d'envoyer la navigation dans les accessoires à l'enfant.

    <ChildComponent navigation={this.props.navigation}/>

Accès dans le composant enfant comme celui-ci

    props.navigation.navigate("ScreenName")
0
Sumedh Ulhe