react-navigation中在static header获取this中的对象的实现方法

大家开发过程中可能遇到过这个问题,就是在项目中使用了react-navigation以后,在navigation的header里 需要获取this操作当前页面中的内容,但是无法获取到;

最常见的处理办法是自定义header 然后隐藏掉static的header,显示自定义的header;

这个办法可以实现在header上操作页面内的内容,但是往往存在一个问题,一不小心会出现各页面header不一致的情况,维护和管理起来比较麻烦,还要单独考虑适配问题,比如iPhone X;

下面介绍一种可以获取this的方式:

第一步,在当前文件内新增一个方法,将需要进行的操作写在方法内


自定义方法,显示小弹窗

第二步:将该方法作为参数放入navigation对象中

在componentWillMount()中,将该方法设置为navigation的参数(将整个方法作为一个对象来使用)


将this中该方法设置为navigation中的参数

第三步:在navigation中获取该对象,实现对当前页面内容的操作的调用;


通过调用navigation中的参数,调用this中的方法
效果图

其他对象内容可以类比实现

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容