我需要在 React Native 的两个视图之间导航。但问题是我的组件，其中导航按钮位于其他组件上。我使用react导航。

我来给你展示 ：

我在这里有我的组件 MainPage

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

所以在我的组件 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.

我有错误未定义不是对象（评估“this.props.navigation.push”）

我的堆栈导航器是这样的：

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

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