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

Posted 2020-10-02

---

---

 

今天看来情书写的文章，研究了一下大佬写的文章，自己做一点总结。

其实，今天我想把我近期遇到的坑都总结一下：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 }/>

 

 

作者介绍：半路学IT，做开发3年，先就职在一家共享单车公司，做后台开发！

 

 我开了一个公众号，欢迎各位有志同道合朋友，关注！不定期分享干活，和我得故事！