react native中的聊天气泡及timer封装成的发送验证码倒计时

其实，今天我想把我近期遇到的坑都总结一下：

1.goback的跨页面跳转，又两种方法，一可以像兔哥那样修改navigation源码，二可以用navigationactions    

2.父子组件的传值，一可以用callback  二可以用pubsub发布订阅模式 三可以用manager事件监听（a页面要显示的内容 有两种形式，一是从manager主动接收，也就是说不需要点击什么的获取数据，而是时时监听manager里数据的变化，第二种a页面获取要显示内容的形式是 点击出发，获取）

3 需要说的还是navigation 在navigationoption是一个stack静态变量，里面不能出现this，所以就会出现一个问题 ，比如说navigationoption里的的headerright里放一个添加按钮，点击添加按钮要推出一个新的页面，以前通用的方法是pubsub发布订阅，而兔子说用setparams，不过都能达到相应的功能，只是优劣的问题。还有就是navigation的动画问题，开发种遇到许多问题，自己的成长过程从expo练习demo，到用官网推荐混合开发。一路走来感受颇多，不过还是挺怀念以前做网站时的coding，为什么呢？那时候比较年轻吧！

好了说一下聊天冒泡气泡的布局

import react, { component } from 'react'; import { appregistry, stylesheet, text, view } from 'react-native'; export default class msgpoppage extends component { render() { return ( <view style={styles.container}> <text style={styles.msg}>hello msg</text> <view style={styles.triangle}> </view> </view> ); } } const styles = stylesheet.create({ container: { flex: 1, flexdirection: 'row', justifycontent: 'center', alignitems: 'center', backgroundcolor: '#f5fcff', }, msg: { fontsize: 20, textalign: 'center', padding: 10, backgroundcolor: 'chartreuse', borderradius: 8, }, triangle: { width: 0, height: 0, backgroundcolor: 'transparent', borderstyle: 'solid', borderleftwidth: 30, borderrightwidth: 30, borderbottomwidth: 8, bordertopwidth: 8, borderleftcolor: 'chartreuse', borderrightcolor: 'transparent', bordertopcolor: 'transparent', borderbottomcolor: 'transparent', }, });

代码运行效果：

timer封装 发送验证码倒计时

日常工作中，倒计时组件是少不了的。目前了解的很多倒计时组件会在应用进入后台时，计时停止或者错乱。下面，我们就来实现一个可用，高交互的例子。

1-：支持倒计时结束时，执行回调，并重新开始计时；

下面开始给出源码首先封装一个timer的组件

代码如下

import react, {component} from 'react'; export default class timer extends component { componentwillmount() { const {interval} = this.props; this.timer = setinterval(this.onevent, interval); } componentwillreceiveprops(newprops) { if (newprops.interval !== this.props.interval) { clearinterval(this.timer); this.timer = setinterval(this.onevent, newprops.interval); } } componentwillunmount() { clearinterval(this.timer); } onevent = ev => { const { ontimer } = this.props; ontimer(ev); }; render(){ return this.props.children || null; } }

在用到的地方调用

import react from 'react'; import { text, view, stylesheet, alert,
} 
from 'react-native'; import timer from './timer' export default class timemsg extends react.component { constructor(props){ super(props); this.state={ count:10, isfinish:false, } } ontimer = () => { if(this.state.count>0){ this.setstate({count: this.state.count - 1}); }else { this.setstate({isfinish:true}); } }; againtime=()=>{ if(this.state.isfinish){ this.setstate({ count:10, isfinish:false, }); //回调，当使用组件时，可用传入回调事件 if(this.props.onpress){ this.props.onpress(); } } } render() { let mainview=this.state.count!=0? <text style={styles.textmsg}>剩余{this.state.count}s</text>: <text style={styles.textmsg} onpress={this.againtime}>重新获取</text> return ( <view style={styles.container}> <view style={styles.mainview}> <timer interval={1000} ontimer={this.ontimer}/> {mainview} </view> </view> ); } } const styles=stylesheet.create({ container:{ backgroundcolor:'#4a4a4a', }, textmsg:{ fontsize:16, }, mainview:{ height: 44, padding: 12, } })

代码效果如下

//回调事件
againtime=()=>{
alert("againtime");
}
//倒计时结束时，可以使用此回调再次开始计时，并执行某些时间
<timemsg onpress={ this.againtime }/>

总结

以上所述是小编给大家介绍的react native中的聊天气泡及timer封装成的发送验证码倒计时，希望对大家有所帮助