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: '要引入的页面路径' }} ...
随机推荐
- HashMap 和 Hashtable 有什么区别?(未完成)
HashMap 和 Hashtable 有什么区别?(未完成)
- 02 js原型链
1 js原型链是一个绕不开的话题.直接上说吧. /** * 1. js里的原型链是怎么样的? 带class 和不带class的原型链的不同. */ const util = require('util ...
- myeclipse 关闭jsp悬浮提示
myeclipse越来越智能,身为码农的我却越来越伤心.虽然你很智能,但请你提供一些有用的信息给我,不要乱七八槽的,不问青红皂白就塞一大堆提示给我,对不起,哥不需要这些!!! 都知道,使用myecli ...
- Gym - 101981B Tournament (WQS二分+单调性优化dp)
题意:x轴上有n个人,让你放置m个集合点,使得每个人往离他最近的集合点走,所有人走的距离和最短. 把距离视为花费,设$dp[i][k]$表示前i个人分成k段的最小花费,则有递推式$dp[i][k]=m ...
- 使用IDEA springboot 如何通过mybatis-generator自动生成mapper dao model
第一步:在maven工程当中的resource下面,创建generatorConfig.xml文件. 务必注意创建的位置!!! <?xml version="1.0" enc ...
- PHP配置文件(php.ini)详解
[PHP] ; PHP还是一个不断发展的工具,其功能还在不断地删减 ; 而php.ini的设置更改可以反映出相当的变化, ; 在使用新的PHP版本前,研究一下php.ini会有好处的 ;;;;;;;; ...
- 包 ,模块(time、datetime、random、hashlib、typing、requests、re)
目录 1. 包 1. 优先掌握 2. 了解 3. datetime模块 1. 优先掌握 4. random模块 1. 优先掌握 2. 了解 5. hashlib模块和hmac模块 6. typing模 ...
- Anaconda 下 Jupyter 更改默认启动路径和默认浏览器
1.Jupyter 更改默认启动路径方法 输入jupyter notebook --generate-config 会生成jupyter_notebook_config.py 找到文件,并打开 将 # ...
- IO编程之序列化
转载地址:https://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/00138683221 ...
- Beep调用系统声音
using System.Runtime.InteropServices; 引用命名空间 [DllImport("kernel32.dll")]public static ...