React Native開發封裝Toast與加載Loading組件示例

來源：懂視網責編：小采時間：2020-11-27 22:08:01

React Native開發封裝Toast與加載Loading組件示例

React Native開發封裝Toast與加載Loading組件示例:在App開發中，我們避免不了使用的兩個組件，一個Toast，一個網絡加載Loading，在RN開發中，也是一樣，React Native官方并沒有提供者這兩個常用組件，需要開發者自己根據需求來自定義。作者就在其他組件的基礎上在進行二次封裝，使用起來更加簡單，更具擴展性

推薦度：

點擊下載本文 文檔為doc格式

導讀React Native開發封裝Toast與加載Loading組件示例:在App開發中，我們避免不了使用的兩個組件，一個Toast，一個網絡加載Loading，在RN開發中，也是一樣，React Native官方并沒有提供者這兩個常用組件，需要開發者自己根據需求來自定義。作者就在其他組件的基礎上在進行二次封裝，使用起來更加簡單，更具擴展性

在App開發中，我們避免不了使用的兩個組件，一個Toast，一個網絡加載Loading，在RN開發中，也是一樣，React Native官方并沒有提供者這兩個常用組件，需要開發者自己根據需求來自定義。作者就在其他組件的基礎上在進行二次封裝，使用起來更加簡單，更具擴展性，同學們只需將Toast與Loading文件拖到項目中，install對應的組件庫即可

效果圖

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 才能使用，同學們需要注意

Toast組件

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

只顯示最簡單的文本的toast

只顯示最簡單的文本的長toast，顯示時長 + 500毫秒

顯示success的toast，success的Toast帶有一個成功的對號icon

顯示success的toast，支持回調，使用場景類似于登錄成功，顯示1500毫秒toast，然后在回調函數中跳轉到其他頁面

顯示success的長toast，顯示時長 + 500毫秒

顯示success的長toast，顯示時長 + 500毫秒，支持回調，使用場景類似于登錄成功，顯示1000毫秒toast，然后跳轉到其他頁面

顯示warning的toast，使用場景類似于登錄表單，手機號填寫錯誤

顯示報錯的toast，使用場景類似于登錄表單，提交表單失敗

Loading組件

Loading組件最常用的使用場景就是網絡請求時，數據還沒有請求回來之前，頁面最上層顯示一個正在加載的loading框，一來能夠防止用戶在網絡請求時又做其他的操作，二來可以給用戶一個更好的體驗，不至于頁面空白，顯得突兀

loading支持手動調用顯示：show()
支持手動關閉顯示：hidden()

這里作者建議使用redux來控制Loading的顯示與隱藏，這樣不用在每一個需要網絡請求的頁面都手動去調用顯示與隱藏，更高端的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()
 }
 }

}

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

React Native開發封裝Toast與加載Loading組件示例

推薦度：

點擊下載本文 文檔為doc格式

標簽：組件 React native

熱門焦點

React Native開發封裝Toast與加載Loading組件示例

React Native開發封裝Toast與加載Loading組件示例

React Native開發封裝Toast與加載Loading組件示例

最新推薦

猜你喜歡

熱門推薦