javascript - navigation between component in react native - Stack Overflow

admin管理员组

文章数量:1334148

I need to navigate between two view in React Native. But the problem is my ponent where the button to navigate is on an other ponent. I use the react-navigation.

Let me show you :

I have my ponent MainPage here

class MainPage extends Component {
  render() {
    return <View style={styles.container}>
              <ComponentWithButton /> 
          </View>
  }
}

So in my ponent ComponentWithButton :

class ComponentWithButton extends Component {
      goToComponent(){
         this.props.navigation.push('Next')
      }
      render() {
        return <View style={styles.container}>
                  <Button onPress={this.goToComponent.bind(this)}/> 
              </View>
      }
    }

My next ponent is called NextComponent.

I have the error undefined is not an object (evaluating "this.props.navigation.push")

My stack navigator is this :

const RootStack = StackNavigator(
  {
    Main: {
      screen: MainPage
    },
    Next: {
      screen: NextComponent
    }
  },
  {
    initialRouteName: "Main"
  },
  {
    navigationOptions: {
      header: { visible: false }
    }
  }
);

I try to run my code with just one ponent it's working perfectly. I think there is problem because ComponentWithButton is not called in my RootStack or something like that. I don't know I am a newbie

I need to navigate between two view in React Native. But the problem is my ponent where the button to navigate is on an other ponent. I use the react-navigation.

Let me show you :

I have my ponent MainPage here

class MainPage extends Component {
  render() {
    return <View style={styles.container}>
              <ComponentWithButton /> 
          </View>
  }
}

So in my ponent ComponentWithButton :

class ComponentWithButton extends Component {
      goToComponent(){
         this.props.navigation.push('Next')
      }
      render() {
        return <View style={styles.container}>
                  <Button onPress={this.goToComponent.bind(this)}/> 
              </View>
      }
    }

My next ponent is called NextComponent.

I have the error undefined is not an object (evaluating "this.props.navigation.push")

My stack navigator is this :

const RootStack = StackNavigator(
  {
    Main: {
      screen: MainPage
    },
    Next: {
      screen: NextComponent
    }
  },
  {
    initialRouteName: "Main"
  },
  {
    navigationOptions: {
      header: { visible: false }
    }
  }
);

I try to run my code with just one ponent it's working perfectly. I think there is problem because ComponentWithButton is not called in my RootStack or something like that. I don't know I am a newbie

• javascript
• reactjs
• react-native
• react-router
• react-navigation

Share Improve this question Follow asked Aug 15, 2018 at 19:34 Monsieur SamMonsieur Sam 33311 gold badge77 silver badges2020 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

you didn't pass the navigation props to the <ComponentWithButton />

do something like this

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

also the method should be

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

if I recall

react-navigation has a function withNavigation that populate navigation props in any of your Component. Just use it like that:

import { withNavigation } from 'react-navigation';

class ComponentWithButton extends Component {
      goToComponent(){
         this.props.navigation.push('Next')
      }
      render() {
        return <View style={styles.container}>
                  <Button onPress={this.goToComponent.bind(this)}/> 
              </View>
      }
}

export default withNavigation(ComponentWithButton);

本文标签： javascriptnavigation between component in react nativeStack Overflow