react native中如何實(shí)現(xiàn)聊天氣泡及timer封裝成的發(fā)送驗(yàn)證碼倒計(jì)時(shí)

這篇文章主要介紹了react native中如何實(shí)現(xiàn)聊天氣泡及timer封裝成的發(fā)送驗(yàn)證碼倒計(jì)時(shí)，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

1.goBack的跨頁面跳轉(zhuǎn)，又兩種方法，一可以像兔哥那樣修改navigation源碼，二可以用navigationActions    

2.父子組件的傳值，一可以用callBack  二可以用pubsub發(fā)布訂閱模式 三可以用manager事件監(jiān)聽（a頁面要顯示的內(nèi)容 有兩種形式，一是從manager主動(dòng)接收，也就是說不需要點(diǎn)擊什么的獲取數(shù)據(jù)，而是時(shí)時(shí)監(jiān)聽manager里數(shù)據(jù)的變化，第二種a頁面獲取要顯示內(nèi)容的形式是 點(diǎn)擊出發(fā)，獲取）

3 需要說的還是navigation 在navigationOption是一個(gè)stack靜態(tài)變量，里面不能出現(xiàn)this，所以就會(huì)出現(xiàn)一個(gè)問題 ，比如說navigationOption里的的headerRight里放一個(gè)添加按鈕，點(diǎn)擊添加按鈕要推出一個(gè)新的頁面，以前通用的方法是pubsub發(fā)布訂閱，而兔子說用setParams，不過都能達(dá)到相應(yīng)的功能，只是優(yōu)劣的問題。還有就是navigation的動(dòng)畫問題，開發(fā)種遇到許多問題，自己的成長過程從expo練習(xí)demo，到用官網(wǎng)推薦混合開發(fā)。一路走來感受頗多，不過還是挺懷念以前做網(wǎng)站時(shí)的coding，為什么呢？那時(shí)候比較年輕吧！

好了說一下聊天冒泡氣泡的布局

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', }, });

代碼運(yùn)行效果：

timer封裝 發(fā)送驗(yàn)證碼倒計(jì)時(shí)

日常工作中，倒計(jì)時(shí)組件是少不了的。目前了解的很多倒計(jì)時(shí)組件會(huì)在應(yīng)用進(jìn)入后臺(tái)時(shí)，計(jì)時(shí)停止或者錯(cuò)亂。下面，我們就來實(shí)現(xiàn)一個(gè)可用，高交互的例子。

1-：支持倒計(jì)時(shí)結(jié)束時(shí)，執(zhí)行回調(diào)，并重新開始計(jì)時(shí)；

下面開始給出源碼首先封裝一個(gè)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; } }

在用到的地方調(diào)用

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, }); //回調(diào)，當(dāng)使用組件時(shí)，可用傳入回調(diào)事件 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, } })

代碼效果如下

//回調(diào)事件
againTime=()=>{
alert("againTime");
}
//倒計(jì)時(shí)結(jié)束時(shí)，可以使用此回調(diào)再次開始計(jì)時(shí)，并執(zhí)行某些時(shí)間
<TimeMsg onPress={ this.againTime }/>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“react native中如何實(shí)現(xiàn)聊天氣泡及timer封裝成的發(fā)送驗(yàn)證碼倒計(jì)時(shí)”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!