在App開發中，我們避免不了使用的兩個組件，一個Toast，一個網絡加載Loading，在RN開發中，也是一樣，React Native官方并沒有提供者這兩個常用組件，需要開發者自己根據需求來自定義。作者就在其他組件的基礎上在進行二次封裝，使用起來更加簡單，更具擴展性，同學們只需將Toast與Loading文件拖到項目中，install對應的組件庫即可
效果圖
Toast和Loading Demo地址
https://github.com/guangqiang-liu/react-native-toastAndLoading
Demo使用使用到的三方組件
注意
react-native-vector-icons 需要link 才能使用，同學們需要注意
Toast組件
toast組件這里作者分類8種不同的使用場景，目前能想到的就這多場景了，后面同學們有其他場景，可以自行添加即可，Toast組件中使用到的Icon圖標，同學們也可以自行修改
Loading組件
Loading組件最常用的使用場景就是網絡請求時，數據還沒有請求回來之前，頁面最上層顯示一個正在加載的loading框，一來能夠防止用戶在網絡請求時又做其他的操作，二來可以給用戶一個更好的體驗，不至于頁面空白，顯得突兀
這里作者建議使用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() } }}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
