1.TabBarItem 逻辑完善
那么为了更好的用户体验,我们这边还需要来处理一下点击 TabBarItem 的一下细节,那就是当用户点击 Item 时,可能只是单纯的想进行页面的 切换或者置顶操作 ,而不想进行 刷新,那么我们就需要来判断一下什么时候需要刷新,什么时候需要置顶。
那么我们可以通过判断 ListView 中的 Scroll 的偏移量来判断是否需要进行置顶操作,当偏移量大于 1 的时候我们就进行置顶操作,否则的话我们就进行刷新操作。
那么问题又来了,当我们执行刷新操作的时候,应该模拟用户下拉显示 滚动小菊花 来告诉用户我们在进行刷新操作,可是 pullList 并没有提供我们这个方法怎么办?那我们就需要分析 第三方框架的内容 来找方法解决这个问题
GDHome.js
// 点击了Item clickTabBarItem() { // // 打印组件 // console.log(this.refs.pullList); // // 打印偏移量 // console.log(this.refs.pullList.scroll.scrollProperties.offset); let PullList = this.refs.pullList; if (PullList.scroll.scrollProperties.offset > 0) { // 不在顶部 // 一键置顶 PullList.scrollTo({y:0}); }else { // 在顶部 // 执行下拉刷新动画 PullList.state.pullPan = new Animated.ValueXY({x: 0, y: this.topIndicatorHeight * -1}); // 加载最新数据 this.loadData(); // 关闭动画 setTimeout(() => { PullList.resetDefaultXYHandler(); },1000); } }
2.关闭筛选菜单滑动手势
那这边我们的筛选菜单还有个问题,就是可以响应我们的手势进行滚动,这样肯定是不对的,那么我们需要关闭这个手势的监听,使这个菜单不能滚动,具体操作如下:
GDCommunalSiftMenu.js
render() { return( <TouchableOpacity onPress={() => this.popToHome(false)} activeOpacity={1} // 不透明 > <View style={styles.container}> {/* 菜单内容 */} <ListView scrollEnabled={false} // 设置禁止滚动 dataSource={this.state.dataSource} // 设置数据源 renderRow={this.renderRow.bind(this)} // 根据数据初始化 Cell contentContainerStyle={styles.contentViewStyle} // 内容样式 initialListSize={16} // 一次性渲染几行数据 /> </View> </TouchableOpacity> ) }
3.Navigator 掉帧卡顿问题处理
到现在肯定有很多朋友发现 Navigator 跳转动画并不是那么流畅,会出现掉帧卡顿的现象,并不像 NavigatorIOS 那么丝丝顺滑;造成这个的原因是因为 NavigatorIOS 是在 UI线程 执行的 动画操作,而 Navigator 是在 js线程执行的动画,那这样就会 阻塞住 JS线程,那么怎么去解决这个问题?这边提供 2 种方案:
第一种:使用 navigation 框架,这个是目前替代 navigator 最好的方案之一,很强大,很流畅,但是需要再去学习一下使用。
第二种:如果你懒得学习上面的框架,那么这边再给各位提供另一种方法 —— 使用官方提供的 API:InteractionManager(可以将一些耗时较长的工作安排到所有互动或动画完成之后再进行。这样可以保证JavaScript动画的流畅运行),这边我们就使用这种方案来进行一下优化:
// 跳转到搜索页面 pushToSearch() { InteractionManager.runAfterInteractions(() => { this.props.navigator.push({ component: Search, }); }); }
.