使用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注意点的更多相关文章

  1. [RN] React Native 好用的时间线 组件

    React Native 好用的时间线 组件 效果如下: 实现方法: 一.组件封装 CustomTimeLine.js "use strict"; import React, {C ...

  2. React Native之React速学教程(中)

    概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...

  3. React Native之React速学教程(上)

    概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...

  4. 【React Native】React Native项目设计与知识点分享

    闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...

  5. React Native之React速学教程(下)

    概述 本篇为<React Native之React速学教程>的最后一篇.本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习Reac ...

  6. 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 ...

  7. React Native之React Navigation踩坑

    自动重装系统之后,已经很长一段时间没有来写React Native了,今天空闲之余,决定重新配置React Native的开发环境,继续踩坑... React Native的开发环境配置狠简单,只要依 ...

  8. React Native 的高度与宽度设置

    React Native中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点. import React, { Component } from 'react'; import { AppRe ...

  9. react native (2) 嵌入h5页面 设置顶部导航

    嵌入h5页面 1.新建好页面 2. import { WebView } from 'react-native'; 3.<WebView source={{ uri: '要引入的页面路径' }} ...

随机推荐

  1. linux自由软件安装 ./config, make的理解

    在linux系统中安装软件的其中一种:源码安装的方法是,先输入./configure,然后输入make,最后make install.或许有人留意到没有,这些软件的根目录中开始是没有Makefile的 ...

  2. P1582 倒水 题解

    来水一发水题.. 题目链接. 正解开始: 首先,我们根据题意,可以得知这是一个有关二进制的题目: 具体什么关系,怎么做,我们来具体分析: 对于每个n,我们尝试将其二进制分解,也就是100101之类的形 ...

  3. vulkan asynchronous compute

    https://www.youtube.com/watch?v=XOGIDMJThto https://www.khronos.org/assets/uploads/developers/librar ...

  4. metal2 里 programmable blending 和image block的区别 语法以及persistent thread group的语法

    programmable blending 刚接触这个概念的时候 挺激动的 因为能解决很多管线里面的问题 比如 切一次rt再切回来 为了做read write same rt 有了这个 就不用切啦 可 ...

  5. [HBase]region compaction流程

  6. 【leetcode】1290. Convert Binary Number in a Linked List to Integer

    题目如下: Given head which is a reference node to a singly-linked list. The value of each node in the li ...

  7. 享元模式(Flyweight)---结构型

    1 基础知识 定义:提供了减少对象数量从而改善应用所需的对象结构的方式.特征:运用共享技术有效支持大量细粒度的对象. 本质:分离与共享. 使用场景: (1)如果一个应用程序使用了大量的细粒度对象,可以 ...

  8. 「BZOJ 5010」「FJOI 2017」矩阵填数「状压DP」

    题意 你有一个\(h\times w\)的棋盘,你需要在每个格子里填\([1, m]\)中的某个整数,且满足\(n\)个矩形限制:矩形的最大值为某定值.求方案数\(\bmod 10^9+7\) \(h ...

  9. Lua unpack函数用法

    unpack,接受一个table做个参数,然后按照下标返回数组的所有元素 unpack lua 版本 <= 5.1 local t = {nil , 3} retunrn unpack(t) / ...

  10. JSON数据的缓存

    前端有时候会遇到JSON数据的缓存,后台给我们JSON数据是一个对象,直接缓存起来它存的是字符串 "[object Object]".这是因为在缓存时会隐式调用toString方法 ...