React Navigation导航报错：this.props.navigation未定义求助

嘿，我来帮你搞定这个报错！你遇到的undefined is not an object (evaluating '_this.props.navigation')问题，根源其实很简单：

你在Home组件里直接把SearchFilter当成普通子组件渲染（<SearchFilter/>），但navigation props只有通过StackNavigator直接导航到的页面才会自动注入。SearchFilter不是通过navigate('SearchFilter')跳转到的页面，所以它自然拿不到navigation这个属性，调用this.props.navigation.navigate就会报错啦。

下面给你两种最实用的解决办法：

方法一：手动从Home传递navigation props #

既然Home是StackNavigator里的页面，它本身拥有完整的navigation props，那我们直接把这个属性传给SearchFilter就行：

修改Home组件的代码：

class Home extends React.Component {
  render() {
    return(
      <View style = {styles.main}>
        <Header/>
        {/* 这里把navigation props传递给SearchFilter */}
        <SearchFilter navigation={this.props.navigation}/>
        <ScrollView contentContainerStyle = {styles.scroll}>
          <Card />
        </ScrollView>
      </View>
    );
  }
}

这样SearchFilter里的this.props.navigation就有值了，你的onPress跳转逻辑就能正常运行。

方法二：使用withNavigation高阶组件（更推荐） #

如果不想每次都手动传递navigation props，可以用React Navigation提供的withNavigation高阶组件来包装SearchFilter，这样不管它在哪里渲染，都能自动获取navigation props：

步骤1：导入withNavigation

import { withNavigation } from 'react-navigation';

步骤2：用withNavigation包装并导出SearchFilter

// 原来的SearchFilter类定义不变
class SearchFilter extends React.Component{
  render(){
    return (
      <View style={styles.main}>
        <View style={styles.wrapper}>
          <TouchableOpacity style={styles.buttonShape} onPress={
            () => this.props.navigation.navigate('Details')}
          >
            <Text style={styles.text}>Super-Market</Text>
            <Image source={require('./icons/supermarket.png')} />
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

// 用withNavigation包装后导出
export default withNavigation(SearchFilter);

这样你在Home里还是用<SearchFilter/>就行，不用传任何props，组件内部就能直接使用this.props.navigation了。

这两种方法都能解决你的问题，个人更推荐第二种，因为它更灵活，后续如果在其他地方复用SearchFilter也不用再手动传props啦。

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