当我尝试从一个页面导航到另一页面时，undefined不是对象（评估'_this.props.navigator.push'）是本机的

Question

Here is the sample code , i am trying react-native-navigation

i used react-native init navigate to start the project and afterwards i installed

yarn add react-native-navigation@latest

the code run perfect for first screen , but as i am making a call to showNextScreen function it throws the error

undefined is not an object (evaluating 'this.props.navigator.push') react native

  import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View
    } from 'react-native';
    import {Navigation} from 'react-native-navigation';
    import firstPage  from './app/components/firstPage';
    export default class navigate extends Component {
    //function to move to next screen
      showNextScreen = () =>{
        this.props.navigator.push({
          screen: 'firstPage',
          title: 'firstScreen'
        })
      }
      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.welcome}>
              Welcome to React Native!
            </Text>
            <Text style={styles.instructions}>
              To get started, edit index.android.js
            </Text>
            <Text onPress={this.showNextScreen.bind(this)} 
            style={styles.instructions}>
              Double tap R on your keyboard to reload,{'\n'}
              Shake or press menu button for dev menu
            </Text>
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });

    AppRegistry.registerComponent('navigate', () => navigate);

Answer 1

Using React Native Navigation, you have to bootstrap your app differently than how it's done originally. Native Navigation doesn't use the registerComponent setup since it's a native navigator.

The steps to fully setting up are listed in their docs https://wix.github.io/react-native-navigation/#/usage

Answer 2

As you said that your code runs perfect for the first screen, I'm pretty confident you've followed the configuration instructions given at the vendor's website, as your application wouldn't even run if you didn't. Now you've configured a startSingleScreenApp or a startTabBasedApp (doesn't really matter which) and you've set your screen (or tabs).

navigator.push is passed as props to those screens you defined and you can execute it from there. However, this.props.navigator.push isn't available applicationwide but only to the defined screens. What to do then?: pass the method as props to the component children as needed.

Example:

 navegarADetalleInstitucion = (institucion) => {
    console.log('[Navigating to institution]', institucion);
    this.props.navigator.push({
      screen: 'serviciosdominicanos.Servicios',
      title: 'Listado de Servicios',
      passProps: {
        institucion
      }
    });
  }

  renderInstituciones = () => {
    return this.state.instituciones.map(inst => <Institucion key={inst} institucion={inst} navegacion={() => this.navegarADetalleInstitucion(inst)} />)
  }

If navegarADetalleInstitucion was defined on the child component and I tried calling it from there, I'd get the exact same error you're receiving. But as I'm sending it as a prop called navegacion, when the child component executes navegacion, it is going to work just fine.

I know this question is rather old, but I hope it helps other developers that encounter this error in the future.