说明:刚接触react native不到两个星期,这两天在做页面跳转的时候遇到了这个问题(头疼了两天)。刚刚终于解决了,先把解决过程记录下来
1、当前react native的最新版本是0.47,因此Navigator需要从react-native-deprecated-custom-components中引入(见官方文档)
,代码如下:
import {Navigator} from 'react-native-deprecated-custom-components'
2、但是在运行项目的时候,总是提示错误:undefined is not an object (evaluating 'this.props.nav.push')。在查到的解决方案主要有一下三种:
方案一:将函数自动绑定this对象
方案二:在constructor函数上进行this绑定
方案三:使用Es6的箭头函数
但是经过测试都以失败告终,更准确的说法是不是失败,而是还没有找到解决问题的关键。
3、要想解决这个问题,关键是要找到'this.props.nav.push'这个提示中哪个是undefined:
goToAboutUs() { let navigator = this.props.nav; Alert.alert('Button clicked ' + navigator); if (navigator) { navigator.push({ id: 'aboutUs', title: 'aboutUs', }); } }
经过这个可以找到“nav”是undefined的
4、如此一来这个问题就很好解决了,找到nav最开始出现的地方(按照页面嵌套或者引用),最终在注册跳转组件的方法里:
static _renderPage(route, nav) { switch (route.id) { case 'main': return (<MainScreen nav={nav}/>); break; } }
这样,只要将这个“nav”通过页面引用传递到需要的页面,这个问题就会解决。在组件MainScreen中可以这样传递到Mine页面中:
<Mine nav={this.props.nav}/>
然后就可以在Mine页面中使用了:
<Button onPress={() => this.props.nav.push({ id: 'aboutUs', title: 'aboutUs', })} title="AboutUs" />
第一次写博客,互相学习,不足之处敬请谅解!