ReactNative開發(fā)封裝Toast與加載Loading組件的示例分析

小編給大家分享一下React Native開發(fā)封裝Toast與加載Loading組件的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、港南網(wǎng)絡(luò)推廣、重慶小程序開發(fā)、港南網(wǎng)絡(luò)營銷、港南企業(yè)策劃、港南品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供港南建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：bm7419.com

在App開發(fā)中，我們避免不了使用的兩個(gè)組件，一個(gè)Toast，一個(gè)網(wǎng)絡(luò)加載Loading，在RN開發(fā)中，也是一樣，React Native官方并沒有提供者這兩個(gè)常用組件，需要開發(fā)者自己根據(jù)需求來自定義。作者就在其他組件的基礎(chǔ)上在進(jìn)行二次封裝，使用起來更加簡單，更具擴(kuò)展性，同學(xué)們只需將Toast與Loading文件拖到項(xiàng)目中，install對(duì)應(yīng)的組件庫即可

效果圖

 

Toast和Loading Demo地址

https://github.com/guangqiang-liu/react-native-toastAndLoading

Demo使用使用到的三方組件

• react-native-root-toast：用來顯示

• toast react-native-root-siblings：用來Loading在App最上層添加視圖

• react-native-vector-icons：IconFont

注意

react-native-vector-icons 需要link 才能使用，同學(xué)們需要注意

Toast組件

toast組件這里作者分類8種不同的使用場景，目前能想到的就這多場景了，后面同學(xué)們有其他場景，可以自行添加即可，Toast組件中使用到的Icon圖標(biāo)，同學(xué)們也可以自行修改

• 只顯示最簡單的文本的toast

• 只顯示最簡單的文本的長toast，顯示時(shí)長 + 500毫秒

• 顯示success的toast，success的Toast帶有一個(gè)成功的對(duì)號(hào)icon

• 顯示success的toast，支持回調(diào)，使用場景類似于登錄成功，顯示1500毫秒toast，然后在回調(diào)函數(shù)中跳轉(zhuǎn)到其他頁面

• 顯示success的長toast，顯示時(shí)長 + 500毫秒

• 顯示success的長toast，顯示時(shí)長 + 500毫秒，支持回調(diào)，使用場景類似于登錄成功，顯示1000毫秒toast，然后跳轉(zhuǎn)到其他頁面

• 顯示warning的toast，使用場景類似于登錄表單，手機(jī)號(hào)填寫錯(cuò)誤

• 顯示報(bào)錯(cuò)的toast，使用場景類似于登錄表單，提交表單失敗

 Loading組件

Loading組件最常用的使用場景就是網(wǎng)絡(luò)請(qǐng)求時(shí)，數(shù)據(jù)還沒有請(qǐng)求回來之前，頁面最上層顯示一個(gè)正在加載的loading框，一來能夠防止用戶在網(wǎng)絡(luò)請(qǐng)求時(shí)又做其他的操作，二來可以給用戶一個(gè)更好的體驗(yàn)，不至于頁面空白，顯得突兀

1. loading支持手動(dòng)調(diào)用顯示：show()

2. 支持手動(dòng)關(guān)閉顯示：hidden()

這里作者建議使用redux來控制Loading的顯示與隱藏，這樣不用在每一個(gè)需要網(wǎng)絡(luò)請(qǐng)求的頁面都手動(dòng)去調(diào)用顯示與隱藏，更高端的Loading使用技巧可以參照作者的 https://github.com/guangqiang-liu/OneM

Toast核心源碼

const Toast = {

 toast: null,

 show: msg => {
 this.toast = RootToast.show(msg, {
 position: 0,
 duration: 1500
 })
 },

 showLong: msg => {
 this.toast = RootToast.show(msg, {
 position: 0,
 duration: 2000
 })
 },

 showSuccess: (msg, options) => {
 let toast = RootToast.show(
 Platform.OS === 'ios' ?
 <View style={styles.container}>
  <Icon name='check' size={50} color={'#fff'}/>
  <Text style={styles.message}>{msg}</Text>
 </View> : msg, {
 duration: 1500,
 position: RootToast.positions.CENTER,
 ...options,
 })
 setTimeout(function () {
 RootToast.hide(toast)
 typeof options === 'function' ? options && options(): null
 }, 2000)
 },

 showLongSuccess: (msg, options) => {
 let toast = RootToast.show(
 Platform.OS === 'ios' ?
 <View style={styles.container}>
  <Icon name='check' size={50} color={'#fff'}/>
  <Text style={styles.message}>{msg}</Text>
 </View> : msg, {
 duration: 2000,
 position: RootToast.positions.CENTER,
 ...options,
 })
 setTimeout(function () {
 RootToast.hide(toast)
 typeof options === 'function' ? options && options(): null
 }, 2500)
 },

 showWarning: (msg, options) => {
 let toast = RootToast.show(
 Platform.OS === 'ios' ?
 <View style={styles.container}>
  <Icon name='warning' size={40} color={'#fff'}/>
  <Text style={styles.message}>{msg}</Text>
 </View> : msg, {
 duration: RootToast.durations.SHORT,
 position: RootToast.positions.CENTER,
 ...options,
 })
 setTimeout(function () {
 RootToast.hide(toast)
 }, RootToast.durations.SHORT + 500)
 },

 showError: (msg, options) => {
 let toast = RootToast.show(
 Platform.OS === 'ios' ?
 <View style={styles.container}>
  <Icon name='close' size={40} color={'#fff'}/>
  <Text style={styles.message}>{msg}</Text>
 </View> : msg, {
 duration: RootToast.durations.SHORT,
 position: RootToast.positions.CENTER,
 ...options,
 })
 setTimeout(function () {
 RootToast.hide(toast)
 }, RootToast.durations.SHORT + 500)
 }

}

Loading核心源碼

const HUD = {

 show: () => {
 sibling = new RootSiblings(
 <View style={styles.maskStyle}>
 <View style={styles.backViewStyle}>
  <ActivityIndicator size="large" color="white" />
 </View>
 </View>
 )
 },

 hidden: ()=> {
 if (sibling instanceof RootSiblings) {
 sibling.destroy()
 }
 }

}

以上是“React Native開發(fā)封裝Toast與加載Loading組件的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文名稱：ReactNative開發(fā)封裝Toast與加載Loading組件的示例分析
文章地址：http://bm7419.com/article6/ipdoog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、外貿(mào)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、全網(wǎng)營銷推廣、定制網(wǎng)站、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)