React Navigation跳转报错：_this.props.navigation.navigate未定义

这个问题的核心原因很明确：你的Swiper组件不是直接注册在StackNavigator里的屏幕组件，所以它不会自动获得navigation属性。而Welcome组件作为导航栈的屏幕，React Navigation会自动给它注入navigation props，所以Welcome里的按钮能正常工作，但Swiper作为子组件就没这个"自动注入"的待遇啦。

下面给你两种可行的解决方案：

方案1：手动传递navigation props给Swiper组件 #

在Welcome.js里渲染Swiper的时候，把Welcome拿到的navigation传递过去：

// Welcome.js里的render方法
render() {
  const { navigation } = this.props;
  // 把navigation作为props传给Swiper
  return (
    <Swiper navigation={navigation}>
      {/* 你的轮播内容... */}
    </Swiper>
  );
}

这样Swiper组件里就能正常通过this.props.navigation调用navigate方法了，你现有的renderButton代码不需要修改。

方案2：使用withNavigation高阶组件 #

如果你不想手动传递props，也可以用React Navigation提供的withNavigation高阶组件，它能给任何组件注入navigation props。

在Swiper.js里做如下修改：

// 首先导入withNavigation
import { withNavigation } from 'react-navigation';

// 你的Swiper组件代码...

// 最后用withNavigation包裹组件后导出
export default withNavigation(Swiper);

这样不管Swiper是作为哪个组件的子元素，都能直接访问this.props.navigation，同样不需要修改renderButton里的代码。

两种方法都能解决你的问题，选哪种看你的项目习惯就行～

内容的提问来源于stack exchange，提问作者Markus Hayner