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);
  }
时间: 2024-08-26 00:36:39

React Native使用react-navigation时,设置navigationOptions中Static中使用this注意点的相关文章

React Native之React速学教程(上)

概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解. What's React React是一个用于组建用户界面的JavaScript库,让你以更简单的方式来创建交互式用户界面. 当数据改变时,React将高效的更新和渲染需要更新的组件.声明性视图使你的代码更可预测,更容易调试. 构建封装管理自己的状态的组件,然后将它们组装成复杂的用户界面.由于组件逻辑是用

React Native之React速学教程(中)

概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解. What's React React是一个用于组建用户界面的JavaScript库,让你以更简单的方式来创建交互式用户界面. 当数据改变时,React将高效的更新和渲染需要更新的组件.声明性视图使你的代码更可预测,更容易调试. 构建封装管理自己的状态的组件,然后将它们组装成复杂的用户界面.由于组件逻辑是用

React Native之React速学教程(下)

概述 本篇为<React Native之React速学教程>的最后一篇.本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习React /React Native过程中对于ES6与ES5的一些困惑. ES6的特性 何为ES6? ES6全称ECMAScript 6.0,ES6于2015年6月17日发布,ECMAScript是ECMA制定的标准化脚本语言.目前JavaScript使用的ECMAScript版本为ECMAScript-262.

React Native与React的关系及特点

一.React.React.js和React Native的关系 React是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发移动应用或网页. 在React之上发展出了React.js框架用来开发网页,发展出来React Native用来开发移动应用. 因为React基础框架与React.js框架是同时出现.同时进化发展的,就造成了React基础框架的基本概念.设计思想都是在React.js的相关文档中描述的. 后来,Facebook推出React Native后,也没有把React

React Native 的高度与宽度设置

React Native中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点. import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class FixedDimensionsBasics extends Component { render() { return ( <View> <View style={{width: 50, height: 50

小谈React、React Native、React Web

React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出,是觉得还有些用处). React.React Native共同特点 起源 Facebook 的内部项目 理念 Learn once, write anywhere,而不是Write once, run anywhere.简单说就是,让你在Web.Mobile原生的开发套路一样,但你还是需要写两套代

react native 初识react native

最近找工作,总是被问道,知不知道react Native,我直接回答,没有:这就是动力了 首先是windows下的环境搭建 参考博客: 史上最详细windows版本搭建安装react-native环境配置/ http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89%88%E6%9C%AC%E6%90%AD%E5%BB%BA%E5%AE%89%E8%A3%85react-native%E7%8E%

react-navigation设置navigationOptions中Static中使用 this 的方法

使用react-navigation时,单页面设置navigationOptions中,进行Static中 调用this 中的方法或值时,需要做如下操作 static navigationOptions = ({navigation,screenProps}) => ({ title: '固定投资', headerRight: <RightGroup navigation={navigation} cback={()=>navigation.state.params.name()} pa

[React Native + Firebase] React Native: Real time database with Firebase -- setup &amp; CRUD

Install: npm i --save firebase // v3.2.1 Config Firebase: First we need to require Firebase: import firebase from 'firebase'; Then in the component constructor, we need to init Firebase: constructor(props){ super(props); // Initialize Firebase var co