React-native：无法读取未定义的属性“ navigate”

Question

I'm getting below error when im trying to navigate to different screen from home screen. i defined initial loading screen in routes. From initial screen trying to navigate to different screen then getting below error.

this.props is returning just {}. Not really sure why.

login.component.js

import React, {Component} from 'react';
import {NavigationActions} from 'react-navigation';


import {
  Platform,
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
  Touchable,
  Image,
  Button
} from 'react-native';


import { handleFbLogin } from '../../config/authConfig/';

class Login extends Component {


  render () {
    console.log("this.props")
    console.log(this.props)

    return (
    <View style={{flex: 1,backgroundColor: '#37afa6'}}>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('setupProfile')}
        />
    </View>

    );
  }
}


export default Login;

routes/index.js

import {StackNavigator} from 'react-navigation';
import Login from '../pages/Login.page';
import SetupProfile from '../pages/setupProfile.page';

const Config = {
  navigation: {
    login: {
      screen: Login
    },
    setupProfile: {
      screen: SetupProfile,
    }
  }
}

export default Config;

App.container.js

import React, {Component} from 'react';
import Login from './pages/Login.page';
import {connect} from 'react-redux';
import Router from './routes';


import {
  Platform,
  StyleSheet,
  Text,
  View,
  TextInput
} from 'react-native';

class App extends Component {
  render () {
    return (
          <Router /> 
    );
  }
}


export default App;

index.js(startup point):

import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
import app from './app/index';
import Config from './app/routes/index';

export const AppNavigator = StackNavigator(Config.navigation,{initialRouteName : 'login'});

AppRegistry.registerComponent('BuddApp', () => AppNavigator);

export default app;

i'm able to load initalscreen after these changes but when trying to navigate still getting the same error.

Answer 1

EDIT :

I got it. You forgot the constructor in your login screen, that's why your props are empty :

constructor(props) {
    super(props);
}

PREVIOUS ANSWER :

Without the full code, i can't see what the exact problem is, but i will give you an exemple of use of react-navigation :

In your index.js (start point of your app) :

import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';

export const AppNavigator = StackNavigator(Config.navigation);
AppRegistry.registerComponent('appName', () => AppNavigator);

In the navigation config :

const Config = {
navigation: {
  login: {
     screen: Login
  },
  setupProfile: {
     screen: SetupProfile,
  }
 }
}

The first object found in the navigation config is the start of your app.

Now you can use your navigation function in the "login" page with navigate :

this.props.navigation.navigate('setupProfile')

If the AppRegistry is filled everything should run fine.

I hope it help !