React Native開發(fā)封裝Toast與加載Loading組件示例

更新時(shí)間：2018年09月08日 15:25:52 作者：光強(qiáng)

這篇文章主要介紹了React Native開發(fā)封裝Toast與加載Loading組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

效果圖

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種不同的使用場(chǎng)景，目前能想到的就這多場(chǎng)景了，后面同學(xué)們有其他場(chǎng)景，可以自行添加即可，Toast組件中使用到的Icon圖標(biāo)，同學(xué)們也可以自行修改

只顯示最簡(jiǎn)單的文本的toast
只顯示最簡(jiǎn)單的文本的長(zhǎng)toast，顯示時(shí)長(zhǎng) + 500毫秒
顯示success的toast，success的Toast帶有一個(gè)成功的對(duì)號(hào)icon
顯示success的toast，支持回調(diào)，使用場(chǎng)景類似于登錄成功，顯示1500毫秒toast，然后在回調(diào)函數(shù)中跳轉(zhuǎn)到其他頁(yè)面
顯示success的長(zhǎng)toast，顯示時(shí)長(zhǎng) + 500毫秒
顯示success的長(zhǎng)toast，顯示時(shí)長(zhǎng) + 500毫秒，支持回調(diào)，使用場(chǎng)景類似于登錄成功，顯示1000毫秒toast，然后跳轉(zhuǎn)到其他頁(yè)面
顯示warning的toast，使用場(chǎng)景類似于登錄表單，手機(jī)號(hào)填寫錯(cuò)誤
顯示報(bào)錯(cuò)的toast，使用場(chǎng)景類似于登錄表單，提交表單失敗

Loading組件

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

loading支持手動(dòng)調(diào)用顯示：show()
支持手動(dòng)關(guān)閉顯示：hidden()

這里作者建議使用redux來控制Loading的顯示與隱藏，這樣不用在每一個(gè)需要網(wǎng)絡(luò)請(qǐng)求的頁(yè)面都手動(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()
 }
 }

}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: