web-dev-qa-db-fra.com

undefined n'est pas un objet (évaluer '_this2.props.navigation.navigate') - React Native

Je ne parviens vraiment pas à faire fonctionner ma navigation. J'utilise react-navigation (StackNavigator). 

Voici ma structure: http://i.imgur.com/IKExx9g.png

Ma navigation fonctionne dans HomeScreen.js: Je navigue de HomeScreen.js à NewScreen.js sans problèmes.

App.js: 

import React from 'react';
import {
    StatusBar, AppRegistry
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import {HomeScreen} from './screens/HomeScreen';
import AboutScreen from "./screens/AboutScreen";
import NewScreen from "./screens/NewScreen";
import CalendarScreen from "./screens/CalendarScreen";
import AddAgendaScreen from "./screens/AddAgendaScreen";

const SimpleApp = StackNavigator({
    Home: {screen: HomeScreen},
    About: {screen: AboutScreen},
    New: {screen: NewScreen},
    Calendar: {screen: CalendarScreen},
    AddAgenda: {screen: AddAgendaScreen}
});

console.disableYellowBox = true;
StatusBar.setHidden(true);
export default SimpleApp; // Export root navigator as the root component

Homescreen.js (en fonctionnement): 

export class HomeScreen extends React.Component {
  static navigationOptions = ({navigation}) => {
    const {state, navigate} = navigation;
    return {
      title: 'eXopera'
    };
  };

  constructor() {
    super();
    this.state = {
      address: [],
      refreshing: false,
      page: 1,
      lastPage: 1,
      loading: true,
      listOpacity: 0,
    };
  }

  render() {   
    return (
      <ScrollableTabView style={{backgroundColor: '#fff'}} renderTabBar={() => <DefaultTabBar  />}>
        <View style={{flex: 1, backgroundColor: '#fff'}} tabLabel="Adressen">
          <Button color="#33cd5f" title="NEW"
            onPress={() => this.props.navigation.navigate('New') }/>
        </View>
      </ScrollableTabView>
    );
  }
}

Ensuite, il y a un autre composant appelé CalendarScreen.js (où j'essaie aussi de naviguer vers NewScreen.js), même si je copie et colle complètement le code de HomeScreen.js, je suis incapable de naviguer. Cela me donne toujours " undefined n'est pas un objet (évaluer '_this2.props.navigation.navigate') ".

Je ne sais vraiment pas ce que je peux faire maintenant. Je lutte avec cela depuis des heures.

Merci d'avance!

javascriptreactjsreact-nativereact-navigation
4
Kenny Hietbrink

En plus de react-navigation, j'utilisais aussi react-native-scrollable-tab-view-view .

Je l'ai résolu en passant les accessoires de navigation à travers l'onglet navigation:

<CalendarScreen navigation={this.props.navigation} tabLabel="Agenda"/>

Vous pouvez ensuite y accéder dans les autres composants sous la forme this.props.navigation.

18
Kenny Hietbrink

On dirait que votre nouvel écran n’est pas enregistré dans le navigateur de l’application et n’a donc pas les accessoires navigation. Votre constructeur devrait être comme ça:

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  New: { screen: NewScreen }, // Add this
});
1
this.lau_

J'ai changé ma méthode de renderHeader(){ ... } à 

renderHeader = () => {
    const title= 'Sign Up';
    return (
      <View style={{
        padding: 20,
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between'
      }}>
        <Icon
          onPress={() => {
                           this.props.navigation.navigate('find');
                         }
                  }
          name='arrow-back'
          type='MaterialIcons'
          color='white'
        />
      </View>
    );
}

cela a résolu ce problème. 

utiliser renderHeader = () => {} au lieu d'utiliser renderHeader () {} est d'une importance capitale pour la résolution de mon problème.

1
HE xinhao