2019独角兽企业重金招聘Python工程师标准>>>

react native 版本采用0.33版本。。新版本相当于旧版本有了一部分改动,还是比较麻烦的,这里重新开始学习。

react native 结构:

/*** Sample React Native App* https://github.com/facebook/react-native* @flow*/import React, { Component } from 'react';
import {AppRegistry,StyleSheet,Text,View
} from 'react-native';class BleManager extends Component {render() {return (<View style={styles.container}><Text style={styles.welcome}>Welcome to React Native!</Text><Text style={styles.instructions}>To get started, edit index.ios.js</Text><Text style={styles.instructions}>Press Cmd+R to reload,{'\n'}Cmd+D or shake for dev menu</Text></View>);}
}const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {fontSize: 20,textAlign: 'center',margin: 10,},instructions: {textAlign: 'center',color: '#333333',marginBottom: 5,},
});AppRegistry.registerComponent('BleManager', () => BleManager);

这是一个最基础的代码结构,react native的精髓就在于state、props,我一直没搞懂,主要0.33跟以前的版本有些不太一样了,初始化state一定要这样写

    constructor() {  super();this.state = {  isRefreshing: false,  };  };

在后面的代码里面通过setState来修改state来达到修改dom也就是render()里面的内容代码结构,这里可以看一段代码

_onRefresh() { this.setState({isRefreshing: true});  setTimeout(() => {  // 准备下拉刷新的5条数据  const rowData = Array.from(new Array(5))  .map((val, i) => ({  text: '刷新行 ' + (+this.state.loaded + i)  })).concat(this.state.rowData);  this.setState({  loaded: this.state.loaded + 5,  isRefreshing: false,  rowData: rowData,  });  }, 5000);  }render() {let rows = this.state.rowData.map((row,ii) => {  return <Row key={ii} data={row}/>;  }); return (<ScrollView style={styles.scrollview}refreshControl={  <RefreshControl  refreshing={this.state.isRefreshing}  onRefresh={this._onRefresh.bind(this)}  colors={['#ff0000', '#00ff00','#0000ff','#3ad564']}  progressBackgroundColor="#ffffff"  />  }>  <ViewPager  style={{height:130}}  dataSource={this.state.dataSource}  renderPage={this._renderPage.bind(this)}  isLoop={true}  autoPlay={true}/>  {rows}</ScrollView>);}

在0.33以后写法一定要切记在调用onRefresh={this._onRefresh.bind(this)} ,如果后面没有bind(this),那么会对setState提示报错,问题纠结了很久,OK,今天先就讲解state,欢迎大家交流

转载于:https://my.oschina.net/u/163029/blog/748787

react native 之setState相关推荐

  1. 【React Native】iOS原生导航跳转RN页面

    上一篇介绍了React Native使用react-navigation进行导航跳转页面,现在我们介绍下原生iOS中怎么导航进一个新的React Native页面. 一.原生跳转React Nativ ...

  2. 【React Native】react-navigation导航使用方法

    目录 集成react-navigation 使用react-navigation 上一篇介绍了如何在已有iOS项目中集成React Native.这一篇我们把上一篇的demo做下拓展,添加点击电影跳转 ...

  3. 给iOS开发者的React Native入门使用教程

    目录 一. 原生iOS项目集成React Native 二. 原生跳转RN页面 三. 显示豆瓣热门电影列表 四. 改为导航 五.完整源代码 一. 原生iOS项目集成React Native 创建一个新 ...

  4. 初步了解React Native的新组件库firstBorn

    first-born is a React Native UI Component Framework, which follows the design methodology Atomic Des ...

  5. React Native常用组件之ListView

    1. ListView常用属性 ScrollView 相关属性样式全部继承 dataSource ListViewDataSource 设置ListView的数据源 initialListSize n ...

  6. React Native小白入门学习路径——五

    React Native小白入门学习路径--五 序 "哦天呐!" 这句话成了我在实验室的口头禅, 老师可能觉得我们都是大神吧,都还在看着基础就给布置了那么多任务:写一个RN的TDD ...

  7. React Native 初体验

    2015年9月底开始正式接触React native,公司的ios团队用它写了一个安卓项目之后,到上周,公司彻底停止了RN的使用. 至于我们为什么停止使用RN,原因大致有两个: 一.RN对安卓的支持还 ...

  8. 从零学React Native之12 组件的生命周期

    一个React Native组件从它被加载,到最终被卸载会经历一个完整的生命周期.所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键. ES6语法和之前的ES5 ...

  9. React Native 项目简单整理-组件优化

    2019独角兽企业重金招聘Python工程师标准>>> 断断续续敲了一天,记录一下没有优化的分类的代码,App.js 里的代码 /*** Sample React Native Ap ...

最新文章

  1. matlab实验是啥,matlab实验心得体会
  2. BEA WebLogic Server 10 查看和配置日志
  3. PageHelper商品分页实现
  4. 租不起房!你离逃离北上广还有多长时间?
  5. rust实战入门到进阶(3)
  6. Depth-first Search深度优先搜索专题6
  7. Keras-2 Keras Mnist
  8. ISCW实验8:配置Cisco与Windows进行IPSec通信
  9. CentOS-FTP
  10. 《请君入瓮——APT攻防指南之兵不厌诈》—第8章8.5节安全贵在未雨绸缪
  11. python均值方差模型_马科维茨的均值一方差组合模型
  12. linux屏幕触碰事件,触摸屏中鼠标事件的捕获和传递及触摸屏的移植
  13. python 代码格式化工具:pep8ify
  14. 如果VxRail要发朋友圈
  15. Java中日期格式化字符串大小写区别YYYY和yyyy
  16. 所有的想不通,都是因为你不懂
  17. 田金龙老师讲解杨式太极拳的起势
  18. 好网线与坏网线的区别,教你几招鉴别技巧
  19. 微信公众号开发,扫描二维码事件推送丢失参数问题
  20. QT报错:error dependent 'xxx' does not exist.

热门文章

  1. android 计算圆周率方法,android Math的使用
  2. linux禁ping禁什么端口,Linux配置防火墙,开启80,22等常用端口禁止ping等
  3. mat分析dump分析_使用Eclipse Memory Analyzer Tool(MAT)分析线上故障(一)
  4. c语言谢延红主编答案,C语言程序设计课程改革与实践.doc
  5. 河流淹没分析_【专题归纳】关于河流地貌的知识点整理!附中国十二条著名江河名称的由来...
  6. cpu核心 线程 进程_科个普:进程、线程、并发、并行
  7. PowerDesigner16.5汉化破解版安装教程(含安装文件、汉化包、破解文件)
  8. R语言与回归分析几个假设的检验
  9. 隐马尔科夫模型(HMM)详解
  10. 优秀Python学习资源收集汇总