反应原生的组件之间的导航 [英] navigation between component in react native

问题描述

我需要在React Native中的两个视图之间导航。但问题是我的组件，导航按钮在另一个组件上。我使用react-navigation。

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

让我告诉你：

我的组件MainPage在这里

I have my component MainPage here

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

所以在我的组件中ComponentWithButton：

So in my component ComponentWithButton :

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

我的下一个组件名为 NextComponent 。

我有错误undefined不是对象（评估this.props.navigation.push）

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

我尝试使用一个组件运行我的代码，它完美运行。我认为存在问题，因为 ComponentWithButton 未在我的 RootStack 中调用或类似的东西。我不知道我是新手

I try to run my code with just one component 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

推荐答案

你没有将导航道具传递给
< ComponentWithButton />

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

做类似这样的事情

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

此方法也应该

this.props.navigation.navigate（'Next'）

如果我记得

这篇关于反应原生的组件之间的导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！