项目地址:https://github.com/pengzhenjin/react-native-mall
效果图
已实现功能
沉浸式状态栏
酷炫的顶部导航动画
消息角标
循环轮播图
搜索
商品一级分类...商品二级分类
商品子分类
顶部滑动的tab、智能下拉菜单
用到的技术
自定义 Badge(角标)
动画、动画插值器
Swiper 轮播图
自定义 tab
自定义 popup 弹窗下拉菜单
FlatList..."箭头图标"在页面中的位置、宽高
this.arrowIcon.measure((x, y, width, height, pageX, pageY) => {...const topOffset = pageY + height // 计算"下拉菜单"距离页面顶部的偏移量
this.dropdownMenu.show(topOffset,...index) // 显示"下拉菜单"
})
}
组件的 measure((x, y, width, height, pageX, pageY) => {}) 方法可以动态的获取组件在屏幕中的位置