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，为什么呢？那时候比较年轻吧！
好了说一下聊天冒泡气泡的布局
importReact,{Component}from'react';import{AppRegistry,StyleSheet,Text,View}from'react-native';exportdefaultclassMsgPopPageextendsComponent{render(){return(HelloMSG);}}conststyles=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的组件
代码如下
importReact,{Component}from'react';exportdefaultclassTimerextendsComponent{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(){returnthis.props.children||null;}}
在用到的地方调用
importReactfrom'react';import{Text,View,StyleSheet,Alert,
}
from'react-native';importTimerfrom'./Timer'exportdefaultclassTimeMsgextendsReact.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(){letmainView=this.state.count!=0?剩余{this.state.count}s:重新获取return(
代码效果如下
//回调事件
againTime=()=>{
alert("againTime");
}
//倒计时结束时，可以使用此回调再次开始计时，并执行某些时间
总结
以上所述是小编给大家介绍的reactnative中的聊天气泡及timer封装成的发送验证码倒计时，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！