react native中的聊天气泡以至timer封装成的出殡验证码倒计时



 

后天线总指挥部的来讲表白信写的篇章,研商了一下大佬写的稿子,本人做一点计算。

实则,前些天自家想把自家近年凌驾的坑都总计一下:1.goBack的跨页面跳转,又三种形式,风姿罗曼蒂克能够像兔哥那样改正navigation源码,二能够用navigationActions    
2.父亲和儿子组件的传值,风流倜傥可以用callBack  二得以用pubsub发布订阅格局三能够用manager事件监听(a页面要体现的内容
有三种情势,一是从manager主动收起,约等于说无需点击什么的获取数据,而是随即监听manager里数据的浮动,第二种a页面拿到要来得内容的花样是
点击出发,获取卡塔 尔(英语:State of Qatar) 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', }, });

 

 

 

 

代码运维效果:

图片 1

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 }/>

图片 2

 

 

笔者介绍:半路学IT,做开采3年,先下车在一家分享单车公司,做后台开采!

 

 小编开了一个公众号,招待各位有志趣相投朋友,关切!不依期分享专业,和本身得传说!

 

图片 3