澳门新葡亰react native中之聊天气泡以及timer封装成的殡葬验证码倒计时。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', }, });

 

 

 

 

代码运行效果:

澳门新葡亰 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



 

今日总的来说情书写的稿子,研究了瞬间非常佬写的文章,自己做一些总。

实际,今天自我思念拿我多年来遇见的坑还总结一下: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', }, });

 

 

 

 

代码运行效果:

澳门新葡亰 4

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

澳门新葡亰 5

 

 

笔者介绍:半路学IT,做开发3年,先下车于同样家共享单车店,做后台开发!

 

 我起来了一个公众号,欢迎各位有志同道合朋友,关注!不期分享工作,和自得故事!

 

澳门新葡亰 6

Leave a Comment.