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