React Native 之 状态指示器【加载数据的状态等待】

结合上几篇博文,今天学习下,如果来优化一下我们的状态指示器。前面几篇文章,在renderLoadingView方法中,直接使用了一个View,然后加了一个简单的字符串进行提示,看起来还是简陋的很。修改之后,这个方法的代码如下:renderLoadingView:function(){return(<LoadingView/>);},这个LoadingView方法,是根据官方教程进行改写的,其中有个小提示,里面用到了react-timer-mixin这个库,还是提交安装比较好,不然后面还要安装之后再重新启动。重要的问题就上面这些了,下面把LoadingView整个代码贴到下面:'usestrict';varReact=requ...

React Native 之 列表【ListView,NavigatorIOS】

React-Native最近看了下他的ListView组件,记录下自己实现的小小功能:一个简单的列表都没啥特别的了,这里添加一个导航。首先使用NavigatorIOS组件,给我们的首页添加一个导航varWalkerfreeProject=React.createClass({render:function(){return(<NavigatorIOSstyle={styles.container}initialRoute={{'title':'Welcome','component':Movies,}} ...

React中上传图片到qiniu

在React中使用qiniu上传图片,实现方式有很多种,一种是在web端实现上传,一种是在server端实现上传这里我说下我是如何在web端实现上传图片到七牛的七牛的官方已经有了javascript的使用说明我这里就不重复了。使用React首先是要把qiniu提供的js引入,由于我这里是使用的webpack,所以我就直接放在了引入文件中,这样我就可以全局引用了。require('./qiniu.js');在组件中把qiniu的对象引入进来constQiniu=require('qiniu');然后在componentDidMount这个方法中去初始化//七牛上传大图letuploader=Qiniu.uploader({runtimes:'html5,flash,html4',browse_button:'pickfiles'...

react innerHtml 赋值操作

使用react的时候,总有一些变量是html的字符串,但是我们却想要实现innerHtml的类似方法,直接用html进行渲染。这里react提供了一个dangerouslySetInnerHTML方法,可以实现此赋值操作。具体详情可以自己去google一个下,关键字:'reactdangerouslySetInnerHTML'.下面是我为记录的一个示例,可以作为一个简单的demo了。constLogin=React.createClass({getInitialState:function(){return{'error_state':false,'error_message':''}},handleClick:function(){&nbs...

React 实现代码高亮

使用插件google的prettify和jquery的format完成了一套很完美的代码高亮显示,还能自动格式化。先说jquery.format的接入【我这里开发是用的webpack】在引入文件中使用reqiure方法,把jquery.format加入到js代码中。require('./jquery.format.js');jquery.format.js这个文件我放在了与引入文件同级的目录下就可以样就可以了。在说引入prettify到react中,这个当然是在html页面中进行的了,所以在html中引入<scriptsrc="https://cdn.bootcss.com/prettify/r298/prettify.min.js?skin=sunburst"></script><scriptsrc="https://cdn.bootcss.com/prettify/r298/lang-sql.min.js?skin=sunburst"></script>就这样就可以了。然后把我们需要的高亮代...

React Prop 验证

本文主要是引入官方的使用,如果此时间较晚,可到官方查看较新使用说明:React.PropTypes提供很多验证器(validator)来验证传入数据的有效性。当向props传入无效数据时,JavaScript控制台会抛出警告。注意为了性能考虑,只在开发环境验证propTypes。下面用例子来说明不同验证器的区别:React.createClass({propTypes:{//可以声明prop为指定的JS基本类型。默认//情况下,这些prop都是可传可不传的。optionalArray:React.PropTypes.array,optionalBool:React.PropTypes.bool,&nbs...

分享React表单提交获取值的方式

很奇怪的,这个是要去自己发现的,我也是在摸索中发现的,其实React的使用,只有你发现了,才觉得好玩,最近的Reflux就是这样子的。##表单提交部分handleSubmit:function(e){e.preventDefault();varparams={};varkeys=React.findDOMNode(this.refs.keys).value.trim();vardays=React.findDOMNode(this.refs.days).value.trim();varnum=React.findDOMNode(this.refs.num).value.trim();varstartDate=React.findDOMNode(this.refs.from_date).value.trim();varendDate=React.findDOMNode(this.refs.to_date).value.trim();//这部分是我自己发现的,...

React Pager分页实例

React的分页实例来了![适合与webpack组合使用,不太适合纯html页面调用,不过可以根据您自己的情况进行改写]define(function(require,exports,module){'usestrict';varReact=require('reactAddons');module.exports=React.createClass({clickHandler:function(e){e.preventDefault();this.props.listData(e.currentTarget.dataset.page);},&nbs...