Undefined is not an Object（evaluating this.props.n使用react-navigation再引入的组件中做导航跳转

报错：

页面跳转时，报  Undefined is not an Object（evaluating this.props.navigation.navigate)

出错原因：

在一个页面组件中调用了另一个组件，而跳转动作在被调用组件中定义。则会出现：当前呈现页面的this与跳转动作发生的this不一致，导致跳转动作不能被调用。

解决办法：

在当前呈现页面获取跳转动作调用方法，作为参数传递给跳转动作发生组件。

代码如下：

export default class PayFailedPage extends Component {
    render() {
        return (
            <View style={{flex:1}}>
                <View style={{flex:1}}>
                    <PageTop navigate={this.props.navigation.navigate}/>
                </View>
            </View>
        );
    }
}

在一个组件中引入另一个组件，但另一个组件需要做导航跳转时，则将navigate传入组件。

而在引入的组件中，

class PageTop extends Component{

    render(){

        return (

            <View>

                <View>

                    <Button onPress={()=>{this.props.navigate('Index'); }} style={{flex:1}} title="回到首页"/>

                </View>

            </View>

        );

    }

}