Undefined is not an object (score "_this2.props.navigation.navigate") - React Native

I really can't get my navigation to work. I am using interactive navigation (StackNavigator).

This is my structure: http://i.imgur.com/IKExx9g.png

My navigation works in HomeScreen.js

: I navigate from HomeScreen.js

to with no problem NewScreen.js

.

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 (working):

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>
    );
  }
}

      

Then there is another component called CalendarScreen.js (where I also try to navigate to NewScreen.js), even if I completely copy and paste the code from HomeScreen.js, I cannot navigate. It always gives me " undefined is not an object (score" _this2.props.navigation.navigate ") .

I really don't know what I can do now .. Wrestled with this for a long time.

Thanks in advance!

+3


source to share


2 answers


Besides react-navigation, I also used react-native-scrollable-tab-view .

I solved it by passing in navigation props using tab navigation:



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

Then you can access it in other components like this.props.navigation

.

+8


source


It looks like your new screen is not registered in the app navigator and therefore has no credentials navigation

. Your constructor should look like this:



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

      

+1


source







All Articles