React Native 如何实现吸顶效果

最新推荐文章于 2024-08-23 09:48:28 发布
最新推荐文章于 2024-08-23 09:48:28 发布
阅读量2.6k 收藏 7
点赞数 5
分类专栏： 移动开发 前端开发 文章标签： react native android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DuoguoDad/article/details/126543612
版权

前言

上个月接到一个需求对会员的数据展示、统计。这个也不复杂，当时定的技术是使用react-native实现，有吸顶的效果，在实现的过程中遇到的问题就记录一下。

效果

思路

  • 1、利用FlatList的stickyHeaderIndices属性实现
  • 2、通过监听滚动，判断滚动位置来控制是否固定在顶部

实现1: 利用FlatList的stickyHeaderIndices属性实现

代码

import React, { useEffect } from 'react'
import { View, StyleSheet, FlatList, findNodeHandle, NativeScrollEvent } from 'react-native'
import { NavigationInjectedProps } from 'react-navigation'
import { useDispatch, useSelector } from 'react-redux'
import { FloatingHeader, LoadingFooter, PageFooter, Provider } from '@comps'
import { setState, resetFilter } from '@pages/member-analysis/slice'
import { PageBgEnum } from '@pages/member-analysis/enum'
import {
  getStoreCustomerStatistics,
  getPullNewStatistics,
  queryMemberList,
  Member
} from '@pages/member-analysis/service'
import { HeaderThemeEnum, px2Dp } from '@kit'
import { RootState, AppDispatch } from '@store'
import { common } from '@config/common'
import { WithScreenProps } from '@type'

import CardStatistics from '@pages/member-analysis/components/card-statistics'
import ConsumptionData from '@pages/member-analysis/components/consumption-data'
import UserListSelection from '@pages/member-analysis/components/user-list-selection'
import UserItem from '@pages/member-analysis/components/user-item'
import BottomButton from '@pages/member-analysis/components/bottom-btn'
import PhoneModal from '@pages/member-analysis/components/phone-modal'
import SourceChannelModal from '@pages/member-analysis/components/source-channel-modal'
import NoData from '@pages/member-analysis/components/no-data'

const MemberAnalysis = (props: MemberAnalysisProps) => {
  const { navigation, screenProps } = props
  const { storeCode } = screenProps

  const dispatch: AppDispatch = useDispatch()
  const dataRef = React.createRef<View>()
  const listRef = React.createRef<FlatList>()
  const {
    dataList,
    memberType,
    pageBgColor,
    currentPageNum,
    isLoading,
    hasMore,
    purchasedCategory,
    purchasedBrand,
    beginDate,
    endDate,
    sureFlag
  } = useSelector((state: RootState) => state.memberAnalysis)

  useEffect(() => {
    queryCustomerStatistics()
    queryPullNewStatistics()
  }, [])

  useEffect(() => {
    queryMemberListByPage(1)
  }, [sureFlag])

  return (
    <Provider>
      <View
        style={[
          styles.container,
          { paddingTop: px2Dp(88) + common.currentValue.statusBarHeight, backgroundColor: pageBgColor }
        ]}
      >
        <FloatingHeader
          onBack={() => dispatch(resetFilter())}
          title="会员分析"
          headerTheme={HeaderThemeEnum.transparent}
          navigation={navigation}
        />
        {dataList.length ? (
          <FlatList<Member>
            ref={listRef}
            data={dataList}
            style={styles.container}
            ListHeaderComponent={
              <>
                <CardStatistics />
                <View ref={dataRef} style={styles.bg}>
                  <ConsumptionData />
                </View>
              </>
            }
            stickyHeaderIndices={[1]}
            renderItem={({ item, index }) => {
              if (item?.itemType === 'topSelection' && index === 0) {
                return <UserListSelection navigation={navigation} />
              } else {
                return <UserItem key={item.snCustNum} data={item} navigation={navigation} />
              }
            }}
            ListEmptyComponent={<NoData />}
            onScroll={({ nativeEvent }) => onPageScroll(nativeEvent)}
            onEndReached={() => {
              if (!isLoading && hasMore) {
                queryMemberListByPage(currentPageNum + 1)
              }
            }}
            ListFooterComponent={
              isLoading && hasMore ? (
                <LoadingFooter />
              ) : !isLoading && !hasMore && dataList.length > 0 ? (
                <PageFooter />
              ) : null
            }
          />
        ) : null}
        <BottomButton navigation={navigation} />
        <PhoneModal />
        <SourceChannelModal />
      </View>
    </Provider>
  )

  async function queryCustomerStatistics() {
    getStoreCustomerStatistics(storeCode).then(res => {
      dispatch(setState({ consumption: res }))
    })
  }

  async function queryPullNewStatistics() {
    getPullNewStatistics(storeCode).then(res => {
      dispatch(setState({ pullNewList: res }))
    })
  }

  async function queryMemberListByPage(currentPage: number) {
    await dispatch(setState({ isLoading: true }))
    const params = {
      storeCode,
      memberType,
      categoryCode: purchasedCategory,
      brandCode: purchasedBrand,
      startTime: beginDate,
      endTime: endDate,
      pageNumber: currentPage,
      pageSize: 15
    }
    const res = await queryMemberList(params)
    const data = res?.dataList || []
    const list = currentPage === 1 ? data : dataList.concat(data)
    if (currentPage === 1) {
      list.unshift({ itemType: 'topSelection' })
    }

    dispatch(
      setState({
        isLoading: false,
        isSelectAll: false,
        dataList: list,
        totalCount: res.totalCount,
        currentPageNum: currentPage,
        hasMore: currentPage < res.totalPageCount
      })
    )
  }

  function onPageScroll(nativeEvent: NativeScrollEvent) {
    const offsetTop = nativeEvent.contentOffset.y

    dataRef.current?.measureLayout(
      findNodeHandle(listRef.current) || 0,
      (left: number, top: number) => {
        dispatch(
          setState({
            pageBgColor: offsetTop >= top ? PageBgEnum.WHITE : PageBgEnum.BLUE
          })
        )
      },
      () => {}
    )
  }
}

export default MemberAnalysis

type MemberAnalysisProps = WithScreenProps<{}> & NavigationInjectedProps

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  bg: {
    backgroundColor: 'transparent'
  },
  menuContainer: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingHorizontal: px2Dp(24),
    paddingVertical: px2Dp(18),
    justifyContent: 'space-between'
  }
})

android端 必现如下错误， ios端正常

stickyHeaderIndices的值必须是数字数组,而且data的length必须大于0，不然在安卓会稳定触发index=xx，count=0的报错。也就是说用了stickyHeaderIndices这个属性，在
指定哪个子元素吸顶的时候，一定要保证这个元素已经渲染，首次渲染的时候，data为空或者为null的情况就要判断

实现2: 通过监听滚动，判断滚动位置来控制是否固定在顶部

const MemberAnalysis = (props: MemberAnalysisProps) => {
  const { navigation, screenProps } = props
  const { storeCode } = screenProps

  const dispatch: AppDispatch = useDispatch()
  const dataRef = React.createRef<View>()
  const listRef = React.createRef<FlatList>()
  const selectionRef = React.createRef<View>()
  const {
    dataList,
    memberType,
    pageBgColor,
    currentPageNum,
    isLoading,
    hasMore,
    purchasedCategory,
    purchasedBrand,
    beginDate,
    endDate,
    sureFlag
  } = useSelector((state: RootState) => state.memberAnalysis)

  useEffect(() => {
    queryCustomerStatistics()
    queryPullNewStatistics()
  }, [])

  useEffect(() => {
    queryMemberListByPage(1)
  }, [sureFlag])

  return (
    <Provider>
      <View
        style={[
          styles.container,
          { paddingTop: px2Dp(88) + common.currentValue.statusBarHeight, backgroundColor: pageBgColor }
        ]}
      >
        <FloatingHeader
          onBack={() => dispatch(resetFilter())}
          title="会员分析"
          headerTheme={HeaderThemeEnum.transparent}
          navigation={navigation}
        />
        <FixedUserListSelection navigation={navigation} />
        <FlatList<Member>
          ref={listRef}
          data={dataList}
          style={styles.container}
          ListHeaderComponent={
            <>
              <CardStatistics />
              <View ref={dataRef} style={styles.bg}>
                <ConsumptionData />
                <UserListSelection ref={selectionRef} isFixed={false} navigation={navigation} />
              </View>
            </>
          }
          initialNumToRender={15}
          keyExtractor={(item, index) => `${index}`}
          renderItem={({ item }) => {
            return <UserItem key={item.snCustNum} data={item} navigation={navigation} />
          }}
          ListEmptyComponent={<NoData />}
          onScroll={({ nativeEvent }) => onPageScroll(nativeEvent)}
          onEndReached={() => {
            if (!isLoading && hasMore) {
              queryMemberListByPage(currentPageNum + 1)
            }
          }}
          ListFooterComponent={
            isLoading && hasMore ? (
              <LoadingFooter />
            ) : !isLoading && !hasMore && dataList.length > 0 ? (
              <PageFooter />
            ) : null
          }
        />
        <BottomButton navigation={navigation} />
        <PhoneModal />
        <SourceChannelModal />
      </View>
    </Provider>
  )

  async function queryCustomerStatistics() {
    getStoreCustomerStatistics(storeCode).then(res => {
      dispatch(setState({ consumption: res }))
    })
  }

  async function queryPullNewStatistics() {
    getPullNewStatistics(storeCode).then(res => {
      dispatch(setState({ pullNewList: res }))
    })
  }

  async function queryMemberListByPage(currentPage: number) {
    await dispatch(setState({ isLoading: true }))
    const params = {
      storeCode,
      memberType,
      categoryCode: purchasedCategory,
      brandCode: purchasedBrand,
      startTime: beginDate,
      endTime: endDate,
      pageNumber: currentPage,
      pageSize: 15
    }
    const res = await queryMemberList(params)
    const data = res?.dataList || []
    const list = currentPage === 1 ? data : dataList.concat(data)

    dispatch(
      setState({
        isLoading: false,
        isSelectAll: false,
        dataList: list,
        totalCount: res.totalCount,
        currentPageNum: currentPage,
        hasMore: currentPage < res.totalPageCount
      })
    )
  }

  function onPageScroll(nativeEvent: NativeScrollEvent) {
    const offsetTop = nativeEvent.contentOffset.y

    dataRef.current?.measureLayout(
      findNodeHandle(listRef.current) || 0,
      (left: number, top: number) => {
        dispatch(
          setState({
            pageBgColor: offsetTop >= top ? PageBgEnum.WHITE : PageBgEnum.BLUE
          })
        )
      },
      () => {}
    )

    selectionRef.current?.measureLayout(
      findNodeHandle(listRef.current) || 0,
      (left: number, top: number) => {
        dispatch(
          setState({
            selectionFixed: offsetTop >= top
          })
        )
      },
      () => {}
    )
  }
}

export default MemberAnalysis

type MemberAnalysisProps = WithScreenProps<{}> & NavigationInjectedProps

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  bg: {
    backgroundColor: 'transparent'
  },
  menuContainer: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingHorizontal: px2Dp(24),
    paddingVertical: px2Dp(18),
    justifyContent: 'space-between'
  }
})

通过滚动距离进行判断

 selectionRef.current?.measureLayout(
      findNodeHandle(listRef.current) || 0,
      (left: number, top: number) => {
        dispatch(
          setState({
            selectionFixed: offsetTop >= top
          })
        )
      },
      () => {}
    )

根据selectionFixed控制吸顶

总结

  • 实现1是通过官方的api实现，动画效果更好，使用也简单些，缺点存在平台兼容问题
  • 实现2是通过监听滚动，控制显示与隐藏，所以兼容性很好，缺点就是动画效果需要自己实
GuoguoDad~
关注
专栏目录
react-native从入门到实战系列教程一ScrollView组件吸顶效果
峰会路转的博客
08-03 211
在ScrollView组件里面把第一元素固定在视图顶部的效果，ScrollView在手机上自带了bounce回弹的效果，不管内容是不是超出组件高度还是宽度。
react-native滑动吸顶效果的实现过程
12-10
在React Native中，实现滑动吸顶效果是一个常见的需求，特别是在设计类似新闻应用或电商应用的首页时。本文主要探讨了在React Native中如何解决这一问题，以及在尝试过程中遇到的挑战。 首先，React Native（RN）的...
【React-native】 实现页面中间部分吸顶效果
Li-的博客
02-18 2112
在FlatList 和ScrollView 中有一个stickyHeaderIndices 可以轻松实现吸顶效果 例如： <ScrollView showsVerticalScrollIndicator={false} style={styles.container} stickyHeaderIndices={[0]} /> 表示 ScrollView 的 第一个子元素 上滑时 吸顶 ...
在React中实现滑动时Tab吸顶
最新发布
qq_38311479的博客
08-23 276
在React中实现滑动时Tab吸顶（即当页面滚动到一定位置时，Tab栏固定在页面顶部）。
ReactNative 吸顶
卓原的进化之旅
06-16 5441
感谢同事提供的店铺UI图和思路。 图录的不太好，但意思差不多表明了。 其实如果结构不复杂的话，可以使用SectionList实现，但我这用的是ScrollTabView，ScrollTabView里面还有列表组件，嵌套在SectionList中很麻烦。。。对 我试过了。。。 最开始我的思路是： 滚动组件包括ScrollView,ListView,FlatList,Se...
[RN] React Native 中使用 stickyHeaderIndices 实现 ScrollView 的吸顶效果
weixin_30686845的博客
06-29 2742
React Native中，ScrollView组件可以使用 stickyHeaderIndices 轻松实现 sticky 效果。 例如下面代码中： <ScrollView showsVerticalScrollIndicator={false} style={styles.contain...
Webview 和 React Native 中吸顶效果实现
JavaMonsterr的博客
07-31 887
在跨端开发中，离不开一些吸顶的交互场景，可以参考淘宝或是京东类电商app中一些tab，在整个容器滑动的过程中，吸顶效果非常的连贯和丝滑的，当然这些tab可能是用native开发的，但是跨端应用也能实现很不错的吸顶效果，那么今天我们就来研究一下跨端开发是如何实现吸顶的。webview中吸顶的实现方式。ReactNative中吸顶方法，SectionList是如何实现吸顶的。创作不易，希望屏幕前的你能给笔者赏个赞，以此鼓励我继续创作前端硬文。httpshttpshttps。...
webview 和 React Native 中吸顶效果实现
CSDN云计算
07-29 851
作者 | ????来源 | Sharing一、前言 在跨端开发中，离不开一些吸顶的交互场景，可以参考淘宝或是京东类电商 app 中一些 tab ，在整个容器滑动的过程中，吸顶效果非常的连贯和丝滑的，当然这些 tab 可能是用 native 开发的，但是跨端应用也能实现很不错的吸顶效果，那么今天我们就来研究一下跨端开发是如何实现吸顶的。希望通过这篇文章，你将学习到：webview...
react native 实现水波纹效果
05-29
react native 实现水波纹效果，效果非常棒哦
ReactNative实现Toast的示例
08-28
为了在React Native应用中实现跨平台的Toast功能，我们可以自定义一个组件，确保在Android和iOS上都能得到相同的效果。下面我们将详细探讨如何创建这样一个自定义的Toast组件。 首先，我们需要导入必要的React ...
react native 文字轮播的实现示例
10-18
主要介绍了react native 文字轮播的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-reactlistviewstickyheaderReactlistview能够固定选中的标题
08-15
react-listview-sticky-header - React listview能够固定选中的标题
react-native-stickyheader:列表上悬浮的cell
05-11
react-native-stickyheader 介绍 此组件实现类似React Native ScrollView组件的吸顶效果。 使用原生驱动动画，支持FlatList,SectionList,ListView等有onScroll方法的组件。 效果 iOS Android Example import React, { useState, useCallback, useRef, useEffect } from 'react'; import { StyleSheet, Text, View, FlatList, Animated } from 'react-native'; import StickyHeader from 'react-native-stickyheader'; function App() { const scrollY = useRef(new Anim
react-native 列表吸顶效果&滑动渐变动画&轮播渐变动画
文化园
08-11 7546
使用SectionList实现列表吸顶功能； SectionList在使用上又iOS和安卓系统平台的差异性； 写项目时候，RN用到MobX要注意他的不同的生命周期特性。 TitleBar的滑动渐变动画 & 轮播渐变动画
React native sticky tab吸顶功能
yellowpig1210的专栏
10-19 2054
rn的吸顶实现思路和h5不同，且安卓可能有兼容性问题 思路一 使用ScrollView的stickyHeaderIndices属性 IOS支持，Android不支持 吸顶目标需要是Scrollview的第n+1个子节点 <ScrollView style={ s.container } onScroll = { this.onScroll } scrollEventThrottle = {1} showsVerticalScrollIndicator = ...
react native自定义滚动吸顶位置
qq_53761321的博客
03-15 461
自定义滚动吸顶位置 父组件中主要的工作使用的是动画Animated，对Animated.ScrollView组件的onScroll监听滚动位置，使用Animated.event 将偏移量保存import React, {useRef} from 'react'; import { Text, View, ScrollView, Animated, } from 'react-native'; // 这是我自定义的顶部图片 import EveryDayRecommend from '@/v
使用react native制作可折叠的粘性标题动画
weixin_26645549的博客
09-12 531
Recently I had to develop a collapsible or multi-layered sticky header in React Native for a project, I spent some time looking at how I would go about implementing, and at that time I would have pref...
react-native吸顶效果
黑怀白菜可的博客
09-12 1379
从网络上搜到的，方便自己下次阅读 展示页面 import React from 'react'; import ScrollableTabView, {ScrollableTabBar,} from 'react-native-scrollable-tab-view'; import * as ScreenUtil from './ScreenUtil'; import { View, ...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GuoguoDad~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值