React Native使用react-navigation时,设置navigationOptions中Static中使用this注意点
使用react-navigation时,单页面设置navigationOptions中,进行Static中调用方法,不能像以下设置
onPress = {()=>this.clickFinishButton()}
export default class extends Component {
static navigationOptions = ({
navigation,
screenProps
}) => ({
headerTitle: 'List实现多选',
headerTitleStyle: {
color: 'white'
},
headerStyle: {
backgroundColor: Color.kMainColor // 设置导航栏的背景颜色,headerTintColor设置无效
},
headerRight:(
<NavigationItem
title='完成'
// 这里注意: static里面不能使用this调用方法,出现clickFinishButton is not function
// 参考博客: http://www.jianshu.com/p/2f575cc35780
// onPress={()=>navigation.state.params.navigatePress()}
onPress = {()=>this.clickFinishButton()}
/>
)
});
解决方法:
export default class extends Component {
static navigationOptions = ({
navigation,
screenProps
}) => ({
headerTitle: 'List实现多选',
headerTitleStyle: {
color: 'white'
},
headerStyle: {
backgroundColor: Color.kMainColor // 设置导航栏的背景颜色,headerTintColor设置无效
},
headerRight:(
<NavigationItem
title='完成'
// 这里注意: static里面不能使用this调用方法,出现clickFinishButton is not function
// 参考博客: http://www.jianshu.com/p/2f575cc35780
onPress={()=>navigation.state.params.navigatePress()}
// onPress = {()=>this.clickFinishButton()}
/>
)
});
componentDidMount(){
// 处理数据源
this.handlerDataSource();
this.props.navigation.setParams({navigatePress:this.clickFinishButton})
}
// 点击完成按钮
clickFinishButton = ()=> {
alert('哈哈');
// let data = this.state.dataArr;
// let selectResultArr = [];
// for (var index in data) {
// var element = object[index];
// if (element.isSelected) {
// selectResultArr.push(element);
// }
// }
// alert(selectResultArr.length);
}
React Native使用react-navigation时,设置navigationOptions中Static中使用this注意点的更多相关文章
- [RN] React Native 好用的时间线 组件
React Native 好用的时间线 组件 效果如下: 实现方法: 一.组件封装 CustomTimeLine.js "use strict"; import React, {C ...
- React Native之React速学教程(中)
概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...
- React Native之React速学教程(上)
概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...
- 【React Native】React Native项目设计与知识点分享
闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...
- React Native之React速学教程(下)
概述 本篇为<React Native之React速学教程>的最后一篇.本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习Reac ...
- React Native & react-native-web-player & React Native for Web
React Native & react-native-web-player & React Native for Web https://github.com/dabbott/rea ...
- React Native之React Navigation踩坑
自动重装系统之后,已经很长一段时间没有来写React Native了,今天空闲之余,决定重新配置React Native的开发环境,继续踩坑... React Native的开发环境配置狠简单,只要依 ...
- React Native 的高度与宽度设置
React Native中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点. import React, { Component } from 'react'; import { AppRe ...
- react native (2) 嵌入h5页面 设置顶部导航
嵌入h5页面 1.新建好页面 2. import { WebView } from 'react-native'; 3.<WebView source={{ uri: '要引入的页面路径' }} ...
随机推荐
- TF_Variable Sharing
Reference: http://jermmy.xyz/2017/08/25/2017-8-25-learn-tensorflow-shared-variables/ Tensorflow does ...
- docker 在push镜像到本地registry出现的500 Internal Server Error
]# docker push 192.168.163.131:5000/test The push refers to a repository [192.168.163.131:5000/test] ...
- C语言Ⅰ作业-05
这个作业属于哪个课程 C语言程序设计Ⅰ 这个作业要求在哪里 https://www.cnblogs.com/tongyingjun/p/11722665.html 我在这个课程的目标是 熟练掌握如何用 ...
- 【python爬虫】 爬云音乐我和xxx共同听过的歌曲
闲聊的时候,觉得,想写个爬虫,爬下2个人共同听过的歌曲有哪些,然后一鼓作气,花了一个多小时,写了一个.支持最近一周和所有时间,需要用户没有关闭听歌排行显示 How to start 使用到的工具是Se ...
- Luogu P3527 [POI2011]MET-Meteors 整体二分
思路:整体二分 提交:4次 错因:树状数组开的$int$ 题解: 二分操作序列,将仅用$[l,md]$即可满足要求的国家递归到左半边,将仅用$[l,md]$不能满足要求的国家,把他们的要求去掉左半边的 ...
- 如何打开Mac OSX 终端的颜色
如何打开Mac OSX 终端的颜色 听语音 | 浏览:8453 | 更新:2015-12-15 16:48 1 2 3 4 5 6 7 分步阅读 Mac 终端默认颜色很单一,文件夹和文件无法区分,可以 ...
- noi 第n小的质数
总时间限制: 1000ms 内存限制: 65536kB 描述 输入一个正整数n,求第n小的质数. 输入 一个不超过10000的正整数n. 输出 第n小的质数. 样例输入 10 样例输出 29 一定 ...
- 【CUDA 基础】6.0 流和并发
title: [CUDA 基础]6.0 流和并发 categories: - CUDA - Freshman tags: - 流 - 事件 - 网格级并行 - 同步机制 - NVVP toc: tru ...
- wait()函数
wait()函数:回收僵尸进程 父进程调用wait函数可以回收子进程终止信息.该函数有三个功能: 1) 阻塞等待子进程退出 2) 回收子进程残留资源 3) 获取子进程结束状态(退出原因) /*** z ...
- mac安装genymotion遇到的问题记录
1.出错内容:An error occured while deploying the file或者使用adb devices连接的时候出现下面的错误 adb server version (40) ...