android 倒计时封装,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 ( Hello MSG ); } } 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? 剩余{this.state.count}s: 重新获取 return ( {mainView} ); } } const styles=StyleSheet.create({ container:{ backgroundColor:'#4a4a4a', }, textMsg:{ fontSize:16, }, mainView:{ height: 44, padding: 12, } })
代码效果如下
//回调事件
againTime=()=>{
alert("againTime");
}
//倒计时结束时,可以使用此回调再次开始计时,并执行某些时间
总结
以上所述是小编给大家介绍的react native中的聊天气泡及timer封装成的发送验证码倒计时,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
android 倒计时封装,react native中的聊天气泡及timer封装成的发送验证码倒计时相关推荐
- React Native 中的 Android 原生模块
当使用 React Native 开发 Android 应用时,你可能需要使用没有被 React Native 封装的模块.但你可以使用 Java 编写原生模块,然后选择性的暴露公共接口到 React ...
- Android之React Native 中组件的生命周期
React Native 中组件的生命周期 概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对 ...
- 如何在React Native中构建项目并管理静态资源
by Khoa Pham 通过Khoa Pham 如何在React Native中构建项目并管理静态资源 (How to structure your project and manage stati ...
- 混合开发架构|Android工程集成React Native、Flutter、ReactJs
混合开发架构|Android工程集成React Native.Flutter.ReactJs 架构设计说明 创建安卓原生工程 创建Flutter 集成嵌入原生工程 创建React Native 解决R ...
- 我在React Native中构建时获得的经验教训
by Amanda Bullington 通过阿曼达·布林顿(Amanda Bullington) 我在React Native中构建时获得的经验教训 (Lessons I learned while ...
- 如何在React Native中写一个自定义模块
前言 在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统.提到npm,一般指 ...
- react native中一次错误排查 Error:Error: Duplicate resources
最近一直在使用react native中,遇到了很多的坑,同时也学习到了一些移动端的开发经验. 今天在做一个打包的测试时,遇到了一个问题,打包过程中报错"Error:Error: Dupli ...
- 如何在 React Native 中写一个自定义模块
前言 在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统.提到npm,一般指 ...
- 如何在React Native中创建精美的动画加载器
by Vikrant Negi 通过Vikrant Negi 如何在React Native中创建精美的动画加载器 (How to create a beautifully animated load ...
最新文章
- Google排名第一的技术,引数十万人关注!网友:差点我就放弃了!
- android studio 学习入门篇
- 抛弃PHP,WordPress.com以JavaScript重写
- mysql表定义外键语法_mysql设置外键的语法怎么写?
- .NET Core开发实战(第28课:工作单元模式(UnitOfWork):管理好你的事务)--学习笔记...
- Android 绘制动态图
- [codevs2597]团伙并查集
- TX2017秋招笔试题之编码
- 虚拟机环境下Centos6.5如何上网
- easymock+junit+spring学习·
- Elasticsearch常用搜索和分词器
- journalctl
- 【脚本解析笔记】文件批量重命名
- 前端之JS篇(七)——Web APIsDOM部分内容
- 微型计算机蓝屏的处理方法,电脑出现蓝屏如何解决_电脑蓝屏的处理方法
- 近一个月总结(鸡汤多于技术)
- 水溶Cy7/Cy3/Cy5-SE染料,水溶性CY7活化酯,CAS号:477908-53-5
- Vue之路由(SPA开发模式)
- HTML5期末大作业:京东网站设计——仿2016版京东首页(1页) HTML+CSS+JavaScript 大学生网页作品 电商网页设计作业模板 学生网页制作源代码下载
- 软件使用说明网站+IT新闻评论
热门文章
- 黑客们的故事(连载三) 因为好奇
- Oracle 客户端连接服务器[转]
- codeforces B. The Fibonacci Segment 解题报告
- 程序员九重镜界,很老的今天刚刚翻出来
- [密码学基础][信息安全][每个信息安全博士生应该知道的52件事][Bristol Cryptography][第11篇]DLP、CDH和DDH问题是什么?
- oracle怎么从大字段中取节点,Oracle数据库 获取CLOB字段存储的xml格式字符串指定节点的值...
- ubuntu安装php5-mysql_Ubuntu下安装Apache2, php5 mysql
- 华为swot分析2020_科技口译现场:华为2020全球分析师大会
- 手写tomcat socket closed_【消费电子】:重在阅读,新增手写 BOOX Nova Pro 体验评测...
- C++ 堆、栈、自由存储区、全局静态存储区和常量存储区