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封装成的发送验证码倒计时,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对ZaLou.Cn网站的支持!
- 调用finecms栏目多图怎么实现
- phpcms调用子栏目名称/文章怎么操作
- 小程序开发工具全新上线 附下载地址和教程
- JS页面跳转代码怎么写?总结了5种方法
- finecms如何控制调用子栏目的数量
- finecms如何调用多个指定栏目的内容
- finecms同时调用子栏目和子栏目的文章怎么操作
- 群体智能算法-黏菌寻找食物最优路线行为模拟 2
- thinkcmf安装教程与目录结构详解 快速上手版
- finecms如何批量替换文章中的关键词?
- dedecms批量修改文章为待审核稿件怎么操作
- 群体智能算法-黏菌寻找食物最优路线行为模拟
- finecms设置伪静态后分享到微信不能访问怎么处理
- composer安装其实可以很简单 两行命令就解决了
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- React 17.0.0-rc.2带来全新的JSX转换
- 下载b站外挂字幕,用 potplayer 播放视频也能看字幕了
- MySQL一个字符集转换的骚操作,酿下性能的苦果
- CentOS7下部署Cobbler实现PXE+Kickstart自动化安装【脚本版】
- 腾讯云主机上部署FRP+Teamviewer穿透内网进行远程运维
- 从今天起构建你的JavaScript世界
- SpringCloud开发框架入门知识
- 一张900w的数据表,怎么把原先要花费17s执行的SQL优化到300ms?
- Codeforces Round #624 (Div. 3) A - Add Odd or Subtract Even
- XMLHttpRequest
- Codeforces Round #624 (Div. 3) B - WeirdSort
- 详解 Ajax
- 这个腾讯博客是被腾讯爬虫爬过来的,样式丑,请看我博客园地址,见下文
- Codeforces Round #624 (Div. 3) C - Perform the Combo
- 都是微服务的天下了,还有不知道 JSON 的程序员吗?