交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • react-native滑动吸顶效果的实现过程

    前言

    最近公司开发方向偏向移动端,于是就被调去做RN(react-native),体验还不错,当前有个需求是首页中间吸顶的效果,虽然已经很久没写样式了,不过这种常见样式应该是so-easy,没成想翻车了,网上搜索换了几个方案都不行,最后去github上复制封装好的库来实现,现在把翻车过程记录下来。

    需求效果

    翻车过程

    第一种方案 失败

    一开始的思路是这样的,大众思路,我们需要监听页面的滚动状态,当页面滚动到要吸顶元素所处的位置的时候,我们设置它为固定定位,不过很遗憾,RN对于position属性只提供了两种布局方式:absolute和relative,既没有fixed也没有仍处于试验的api:sticky。尴尬了😅

    第二种方案 失败

    不过也不慌,看网上有第二种方案,把图上第二 三块地方作为ScrollView,然后ScrollView滑动监听距离,把第一块的marginTop设为负值,但是这样第一部分不能滑动,不符合需求,pass

    第三种方案 完全失败

    从网上找到第三种方案,就是一二三部分作为ScrollView,

    第一部分position设为absolute,剩下的不设置,默认是relative

    第二部分(吸顶部分)marginTop设置(setState)为第一部分高度的state,

    添加滑动onScroll事件=》滑动距离y等于第二部分marginTop的state,但是当滑动超过第一部分高度的时候把第二部分(吸顶部分)position设为absolute,并把其marginTop设为0,看起来不错,实际用ios模拟器一跑就无语了😅,效果很奇葩,手指滑动时不吸顶直接划上去隐藏掉大半,一松突然吸顶了。。。

    见下图

    ios的系统,手指在屏幕上滚动时,onScroll一直在触发,如果里面有setState方法,也会不停执行并计算state,但是改变react的state是异步的,只要手指不离开屏幕,改变的state就无法生效(触发界面渲染)

    实现方案

    我最终意识到由于ios的机制,react的state机制不能满足需求,RN里面肯定有借助原生渲染的方式,于是github找了现成的代码实现之后,反过来进行研究,大家有RN丰富经验的也可以直接看最下面代码👇

    RN的Animator

    RN的Animator动画库旨在解决动画问题,由于js桥接过程,动画通常不能很好展现,最好是把动画的 数据 和 变化方法 一次性发给原生,由原生进行处理,这就是Animator库的核心作用。

    记得原来RN的动画一直被吐槽,不过现在效果还挺不错的,可能与近年来手机硬件提升也越来越大也有关系吧。

    简单用法

    由于Animator内部封装了这四个组件,所以默认可以导出<Animator.View/>,<Animator.Text/>,<Animator.Image/>,<Animator.ScrollView/>

    在这几个组件里面想做一些动画处理,数据方面也是react的state,但是赋值要给Animated.Value,如下👇

    this.state = {
      scrollY: new Animated.Value(0)
    }

    这里虽然使用的还是原生state,但是经过Animated处理,渲染机制完全不一样了

    简单原理

    经过Animator包装后的组件,会遍历传入的props和自身的state,查找是否有Animated.Value的实例,并绑定进相应的原生操作。

    props和自身的state变化时,将Animated.Value值逐个转化为普通数值,再交给原生进行渲染,但是值得注意的是,这里并不会触发react 的 render,更不会有什么domdiff ,是一种特殊处理,类似于Animated.Value改变时每次的shouldUpdateComponent返回都是false(毫秒级的渲染react性能扛不住),shouldUpdateComponent函数里面判断Animated.Value,然后会把数据变化发给原生组件

    完整的介绍请移步中文官网Animator库介绍

    实现思路

    既然用了Animator组件了,渲染的问题解决了,下面思路是动态设置吸顶组件的translateY属性。style:{ transform: [{ translateY:translateY }] }

    • 当向下滑动时,不管它
    • 向上滑,但是当头部还没有完全隐藏时,也不管它
    • 向上滑,头部完全不见了,这时向上再滑一点,那么他的translateY就应该 = 上划总距离 - 头部高度,这样越往上滑,把吸顶组件使劲往下推,这样吸顶组件就牢牢固定在顶部了

    下面利用插值来实现

    const translateY = ScrollY.interpolate({
      inputRange: [-1, 0, headerHeight, headerHeight + 1],
      outputRange: [0, 0, 0, 1],
    });

    插值interpolate略难理解,需要一点基础,这里再细说起来这篇文章就太长了官网介绍,

    如果还不懂可以去网上找找这方面的资料

    实现源码

    实现的图中第二部分吸顶功能的核心代码

    import * as React from 'react';
    import { StyleSheet, Animated } from "react-native";
    
    /**
     * 滑动吸顶效果组件
     * @export
     * @class StickyHeader
     */
    export default class StickyHeader extends React.Component{
    
      static defaultProps = {
        stickyHeaderY: -1,
        stickyScrollY: new Animated.Value(0)
      }
      
      constructor(props) {
        super(props);
        this.state = {
          stickyLayoutY: 0,
        };
      }
      // 兼容代码,防止没有传头部高度
      _onLayout = (event) => {
        this.setState({
          stickyLayoutY: event.nativeEvent.layout.y,
        });
      }
    
      render() {
        const { stickyHeaderY, stickyScrollY, children, style } = this.props
        const { stickyLayoutY } = this.state
        let y = stickyHeaderY != -1 ? stickyHeaderY : stickyLayoutY;
        const translateY = stickyScrollY.interpolate({
          inputRange: [-1, 0, y, y + 1],
          outputRange: [0, 0, 0, 1],
        });
        return (
          <Animated.View
            onLayout= { this._onLayout }
            style = {
              [
                style,
                styles.container,
                { transform: [{ translateY }] }
              ]}
          >
    
          { children }
    
          </Animated.View>
        )
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        zIndex: 100
      },
    });
    

    页面里实际用法如下

    // 在页面constructor里声明state
    this.state = {
      scrollY: new Animated.Value(0),
      headHeight:-1
    };
    <Animated.ScrollView 
      style={{ flex: 1 }}
      onScroll={
        Animated.event(
          [{
            nativeEvent: { contentOffset: { y: this.state.scrollY } } // 记录滑动距离
          }],
          { useNativeDriver: true }) // 使用原生动画驱动
      }
      scrollEventThrottle={1}
    >
    
      <View onLayout={(e) => {
        let { height } = e.nativeEvent.layout;
        this.setState({ headHeight: height }); // 给头部高度赋值
      }}>
        // 里面放入第一部分组件
      </View>
      
      <StickyHeader
        stickyHeaderY={this.state.headHeight} // 把头部高度传入
        stickyScrollY={this.state.scrollY}  // 把滑动距离传入
      >
        // 里面放入第二部分组件
      </StickyHeader>
      
      // 这是第三部分的列表组件
      <FlatList
        data={this.state.dataSource}
        renderItem={({item}) => this._createListItem(item)}
      />
      
    </Animated.ScrollView>

    收尾

    具体代码就是这样实现了,算是比较完美的方案,特别是照顾了性能,各位可以基于这个封装来实现更复杂的需求,原理大概就是这个原理了,在前端动画领域,自己确实也就刚入门水平,如有问题,请直接指出。

    另外,这是我找的那个 组件 github的代码地址:https://github.com/jiasongs/react-native-stickyheader,原地址附上,建议如果项目用了给人家一个star

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对北冥有鱼的支持。

    您可能感兴趣的文章:

    • react-native 封装选择弹出框示例(试用ios&android)
    • 详解React Native开源时间日期选择器组件(react-native-datetime)
    • React-Native 组件之 Modal的使用详解
    • react-native 完整实现登录功能的示例代码
    • React-Native中使用验证码倒计时的按钮实例代码
    • react-native动态切换tab组件的方法
    • 探究react-native 源码的图片缓存问题
    • React-Native中一些常用组件的用法详解(一)

    广而告之:
    热门推荐:
    AngularJs页面筛选标签小功能

    AngularJS 简介 AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。 AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。 AngularJS 是一个 JavaScript 框架 AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的···

    Linux下如何实现Mysql定时任务

    假设前提:每天晚上10点到早上5点,每10分钟定时执行存储过程。 实现方式: 第一种是利用Mysql本身实现,制定event定时任务,可以借助Navicat For Mysql或其他数据库开发工具去做; 第二种实现方式是利用linux的定时任务,这个是利用Linux系统自带任务管理工具实现的。 一、Mys···

    深入理解JavaScript的async/await

    async 和 await 在干什么 任意一个名称都是有意义的,先从字面意思来理解。async 是“异步”的简写,而 await 的意思是等待。所以应该很好理解 async 用于申明一个 function 是异步的,而 await 等待某个操作完成。 那么async/await到底是干嘛的呢?我们先来简单介绍一下。 asy···

    PHP支付宝当面付2.0代码

    本文实例为大家分享了PHP支付宝当面付2.0代码,供大家参考,具体内容如下 //支付宝条码支付,直接调用ali_tiaoma_pay方法,把条码和金额传进去就ok function ali_tiaoma_pay($tiaoma,$price){ $data['scene'] = 'bar_code'; //支付场景 $data['out_trade_no'] = date("Y···

    {lang switch

    {lang switch_blind} - discuz的模板文件header.html代码分析

    第五篇Bootstrap 排版

    使用bootstrap的排版特性可以创建标题,段落,列表及其它内联元素。 标题:bootstrap中定义了从h1-h6的六种标题样式。 内联子标题: 如果需要向任意一个标题添加一个子标题,只需要加上<small></small>例如: <h1>我是标题1 h1. <small>我是副标题1 h1···

    php好代码风格的阶段性总结

    本文总结了php好代码的风格,分享给大家供大家参考,具体如下: 1、避免使用魔数 if($age<18){ } 这个18不太明白为什么要这样子。 可以将28定义在一个变量里面,这个变量命名表明了这个值的含义 $adult_age = 18;//成年的分界点年龄 if($age<$adult_age){ } 2、函···

    从性能方面考虑PHP下载远程文件的3种方法

    今天在做导出Excel的时候,总是要测试导出的Excel文件,频繁的下载和打开,很麻烦就想着写段代码一气呵成  服务端导出Excel==>下载Excel文件到本地==>并打开的操作。 这里摘出PHP下载远端文件的方案,以备忘。其中第3种方法考虑到文件过大时的性能问题。 3种方案···

    PHP也能干大事 随机函数

    写在前面 PHP也能干大事是我总结的PHP语法特性及相关函数类库的经典用法,并不一定是真正能实现四两拨千斤的功效,但是掌握这些方法,可以在你的工作和学习上有一些帮助,希望大家能集思广益,将《PHP也能干大事》丰富得更精彩!转载请注明出处(3mc2.com) 二、前言 PHP是常见···

    自动刷新网页,自动刷新当前页面,JS调用

    reload 方法,该方法强迫浏览器刷新当前页面。语法:location.reload([bForceGet])                             ···