undefined 不是对象 this.props.navigation.navigate 反应原生答案

【问题标题】：undefined is not an object this.props.navigation.navigate react nativeundefined 不是对象 this.props.navigation.navigate 反应原生
【发布时间】：2020-02-25 12:40:59
【问题描述】：

我是新手，我创建了一个包含堆栈导航器的 react 本机应用程序，因此当我单击按钮从一个页面导航到另一个页面时出现此错误。
App.js 包含应用容器：

export default class App extends React.Component {
  render(){
    return (
      <AppNavigator />
        );
  }

}
const AppDrawerNavigator = createDrawerNavigator({
  Welcome:{
    screen: WelcomeScreen
  },
  SeConnecter: {
    screen:ConnectionScreen} ,
  About : {
    screen: AboutScreen
  },
  list :{
    screen: ListMed
  }, 
});
const screens = {
  Welcome:{ 
    screen : AppDrawerNavigator
  },
  SeConnecter: {
    screen:AppDrawerNavigator
  } ,
  About : {
    screen: AppDrawerNavigator
  },
  list :{
    screen: AppDrawerNavigator
  },   
}
const AppStackNavigator = createStackNavigator(screens,{
  defaultNavigationOptions:{
    title: 'MediClic',
    headerTintColor :'#fff',
    headerStyle :{
      backgroundColor:'#3498db',
      height: 100,
    },
    headerTitleStyle :{

      justifyContent:'center',
      fontSize: 30,
      fontFamily: 'serif',
      fontWeight:'bold'

    }

  }
});
const AppNavigator= createAppContainer(AppStackNavigator);

欢迎屏幕包含我创建的组件搜索

class WelcomeScreen extends React.Component {
  render(){
    return (
      <View style={styles.container}>

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

      </View>
    );
  }
export default WelcomeScreen

然后是有文本输入的组件搜索+自定义的搜索按钮

class Search extends React.Component{
    constructor(props){
        super(props)
    }

    render(){

        return(

            <KeyboardAvoidingView style ={styles.main_container} behavior='padding'>
                <Text style={styles.text}>Trouvez votre Medecin!</Text>
                <TextInput style={styles.text_input}  placeholder='Médecin,Centre...' />
                <View style={styles.btn_ctr}>
                    <TouchableOpacity style={styles.btn} onPress={()=>this.navigation.navigate('ListMed') }>
                    <Text style={styles.btn_txt}>Rechercher</Text>
                    </TouchableOpacity>
                </View>
             </KeyboardAvoidingView>


        )
    }
}

请帮帮我，我为此浪费了很多时间，我尝试将导航道具传递给它没有用

【问题讨论】：

为什么 this.navigation.navigate 而不是 this.props.navigation.navigate 从我可以告诉类 Search 没有属性导航，thus this.navigation === undefined。我对 StackNavigator 了解不多，所以我不会将其作为答案发布，但在我看来它就像一个简单的错字

标签： javascript reactjs react-native ecmascript-6 expo

【解决方案1】：

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

当您在 Search 组件的导航中传递 this.props.navigation 时，函数调用将是 - this.props.navigation

<TouchableOpacity style={styles.btn} onPress={()=>this.props.navigation.navigate('ListMed') }>

不是this.navigation.navigate('ListMed')

【讨论】：