建站
咨詢
售后
建站咨詢
新聞中心
小編給大家分享一下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íng)銷、港南企業(yè)策劃、港南品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供港南建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com
在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)的組件庫即可
效果圖
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)到其他頁面
顯示success的長(zhǎng)toast，顯示時(shí)長(zhǎng) + 500毫秒
顯示success的長(zhǎng)toast，顯示時(shí)長(zhǎng) + 500毫秒，支持回調(diào)，使用場(chǎng)景類似于登錄成功，顯示1000毫秒toast，然后跳轉(zhuǎn)到其他頁面
顯示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)求回來之前，頁面最上層顯示一個(gè)正在加載的loading框，一來能夠防止用戶在網(wǎng)絡(luò)請(qǐng)求時(shí)又做其他的操作，二來可以給用戶一個(gè)更好的體驗(yàn)，不至于頁面空白，顯得突兀
loading支持手動(dòng)調(diào)用顯示：show()
支持手動(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' ?
{msg}
: 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' ?
{msg}
: 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' ?
{msg}
: 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' ?
{msg}
: 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(
以上是“React Native開發(fā)封裝Toast與加載Loading組件的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
分享名稱：ReactNative開發(fā)封裝Toast與加載Loading組件的示例分析
標(biāo)題URL：http://fisionsoft.com.cn/article/ipdoog.html
