React Native 中组件之间的导航

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

我来给你展示 ：

我在这里有我的组件 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或类似的东西。我不知道我是新手

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

做这样的事情

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

该方法也应该是

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

如果我记得