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: '要引入的页面路径' }} ...
随机推荐
- 解决安卓app在真机上的无法登录问题
和小伙伴用安卓做的app在模拟器上可以正常使用,但是变成apk发到手机上下载使用时,出现无法的登录问题,而且登录提示的错误出现一秒就消失了,无法看清. 于是找了一下老师帮忙,老师是通过在电脑主机上插入 ...
- initramfs机制
1.什么是 Initramfs 在2.6版本的linux内核中,都包含一个压缩过的cpio格式的打包文件.当内核启动时,会从这个打包文件中导出文件到内核的rootfs文件系统,然后内核检查rootfs ...
- 制作 leanote docker 镜像 并运行
# 1.制作基础镜像 leanote 使用 mongodb 存储数据,如果把 mongodb 单独做成一个镜像,初始化数据时比较麻烦,所以最后还是决定把 mongodb 和 leanote 放到同一个 ...
- jvm crash分析
问题描述:线上进程异常退出,查看服务器端日志,有jvm crash文件生成 # # A fatal error has been detected by the Java Runtime Enviro ...
- 数据结构系列文章之队列 FIFO
转载自https://mp.weixin.qq.com/s/ILgdI7JUBsiATFICyyDQ9w Osprey 鱼鹰谈单片机 3月2日 预计阅读时间: 6 分钟 这里的 FIFO 是先入先出 ...
- CCPC 2017 哈尔滨 D. X-Men && HDU 6233(思维+期望)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6233 题意:一个树上有m个人,每个人在某个节点上,每个时刻每个人可以和一个与他距离大于 1 的点进行交 ...
- [Docker] Run a command inside Docker container
For example you are working in a backend project, you have setup Dockerfile: FROM node:10.16.0-stret ...
- HDU 6036 - Division Game | 2017 Multi-University Training Contest 1
/* HDU 6036 - Division Game [ 组合数学,NTT ] | 2017 Multi-University Training Contest 1 题意: k堆石子围成一个圈,数量 ...
- zuul网管配置其他服务时 HTTP Status 500 – Internal Server Error
1.这个错误是由三个原因导致的 (1).我在给类的接口命名的时候前面少加了一个/ (2)给zuul配置路由的时候多加了个服务名,serviceId名称就是spring的name,而不是eureka注入 ...
- MFC 用户登录、注册、工作主窗体
创建项目由向导生成的窗体作为工作的主窗体.用户登录.注册窗体添加对话框来实现. [具体功能] 1.主窗体应该出现在登录窗体成功之后. 2.登录窗体关闭(右上角❌),程序直接退出. 在App.cpp的I ...