在app开发中,我们避免不了使用的两个组件,一个toast,一个网络加载loading,在rn开发中,也是一样,react native官方并没有提供者这两个常用组件,需要开发者自己根据需求来自定义。作者就在其他组件的基础上在进行二次封装,使用起来更加简单,更具扩展性,同学们只需将toast与loading文件拖到项目中,install对应的组件库即可
https://github.com/guangqiang-liu/react-native-toastandloading
react-native-vector-icons
需要link 才能使用,同学们需要注意
toast组件这里作者分类8种不同的使用场景,目前能想到的就这多场景了,后面同学们有其他场景,可以自行添加即可,toast组件中使用到的icon图标,同学们也可以自行修改
loading组件最常用的使用场景就是网络请求时,数据还没有请求回来之前,页面最上层显示一个正在加载的loading框,一来能够防止用户在网络请求时又做其他的操作,二来可以给用户一个更好的体验,不至于页面空白,显得突兀
这里作者建议使用redux来控制loading的显示与隐藏,这样不用在每一个需要网络请求的页面都手动去调用显示与隐藏,更高端的loading使用技巧可以参照作者的react native开发项目:onem
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) } }
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() } } }
如对本文有疑问, 点击进行留言回复!!
M - Jamie‘s Contact Groups POJ - 2289(二分 + 多重匹配)
H - Antenna Placement POJ - 3020(最小边覆盖)
Unity组件【Camera && Flare Layer】
K - Treasure Exploration POJ - 2594
网友评论