React

2023-08-25 14:42| 来源: 网络整理| 查看: 265

前言

正在做商城项目的同学有福啦，看看是你们想要的效果吗？

项目地址：https://github.com/pengzhenjin/react-native-mall

效果图

已实现功能沉浸式状态栏酷炫的顶部导航动画消息角标循环轮播图搜索商品一级分类商品二级分类商品子分类顶部滑动的tab、智能下拉菜单用到的技术自定义 Badge（角标）动画、动画插值器Swiper 轮播图自定义 tab自定义 popup 弹窗下拉菜单FlatList、SectionList重点代码解析

MallHome.js

/** * 滚动条监听事件 * @param event */ onScrollFunc = (event) => { // 将滚动的值绑定到渐变动画 Animated.event([{nativeEvent: {contentOffset: {y: this.state.logoOpacity}}}])(event) // 将滚动的值绑定到边距动画 Animated.event([{nativeEvent: {contentOffset: {y: this.state.searchViewMargin}}}])(event) } renderSearchView = () => { const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity) const marginRight = this.state.searchViewMargin.interpolate({ inputRange: [0, 80], // 当滚动条滚动到0～80的位置时 outputRange: [0, 80], // 将右边距改为从0～80 extrapolate: 'clamp' // 滚动超出0～80的范围，不在更改边距 }) const marginTop = this.state.searchViewMargin.interpolate({ inputRange: [0, 160], // 当滚动条滚动到0～160的位置时 outputRange: [0, -36], // 将上边距改为从0～-36 extrapolate: 'clamp' // 滚动超出0～160的范围，不在更改边距 }) return ( {'新品'} ) } GoodsCategory.js 解析 render() { return ( // 一级分类列表，采用FlatList this.flatList = refs} keyExtractor={(item, index) => index.toString()} data={this.state.firstCategoryData} renderItem={this.renderFirstCategoryItem} ItemSeparatorComponent={this.renderSeparatorLine} /> // 二级、三级分类列表，采用SectionList this.sectionList = refs} renderSectionHeader={this.renderSecondCategorySectionHeader} renderItem={this.renderSecondCategoryItem} sections={this.state.secondCategoryData} ItemSeparatorComponent={null} ListHeaderComponent={null} ListFooterComponent={null} keyExtractor={(item, index) => index + item} /> ); } // 点击一级分类时，需要计算滚动条的位置 onClickFirstCategoryItem = (item, index) => { this.setState({selectedFirstCategoryIndex: index}); // 计算当前 item 的高度 const indexHeight = firstCategoryItemHeight * index; // 计算屏幕一半的高度 const halfHeight = (height - 65) / 2; // 如果当前 item 的高度大于屏幕一半的高度，就让滚动条滚动 indexHeight - halfHeight 高度（类似京东商品分类效果） if (indexHeight > halfHeight) { this.flatList.scrollToOffset({ animated: true, offset: indexHeight - halfHeight, }); } this.sectionList.scrollToLocation({ animated: true, itemIndex: 0, sectionIndex: 0, }); };

TopTabView.js 解析

/** * 显示下拉菜单 * @param index 当前选中时的 tab 下标 */ showDropdownMenu = (index) => { // measure方法测量"箭头图标"在页面中的位置、宽高 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) => {}) 方法可以动态的获取组件在屏幕中的位置、宽高信息。measure 方法的参数 x，y 表示组件的相对位置，width，height 表示组件的宽度和高度，pageX，pageY 表示组件相对于屏幕的绝对位置。

TopDropdownMenu.js 解析

// 使用 Modal 来实现弹窗菜单，达到遮罩效果 render() { const {isVisible, data, topOffset} = this.state; return ( this.hide()} visible={isVisible} > this.hide()} > index.toString()} data={data} renderItem={this.renderItem} horizontal={false} numColumns={2} renderSeparator={null} /> ); } // 使用绝对布局和 top 来计算弹窗菜单的位置，其中 top 是动态计算的 content_container: { position: 'absolute', top: 0, backgroundColor: '#FFFFFF', },

最后

本文在开源项目：https://github.com/xieyuliang/Note-Android中已收录，里面包含不同方向的自学编程路线、面试题集合/面经、及系列技术文章等，持续更新中…

【本文地址】

React

React

今日新闻

推荐新闻