RN向上向下滑动组件封装(带有渐变色)

这段组件代码逻辑是出事有一个View和下面的块,下面的块也就是红色区域可以按住向上向下滑动,当滑动到屏幕最上面则停止滑动,再向上滑动的过程中,上方的View的背景色也会有个渐变效果,大概逻辑就是这样

代码如下

js 复制代码
import React, {useEffect, useRef, useState} from 'react';
import {
  View,
  PanResponder,
  Animated,
  StyleSheet,
  SafeAreaView,
  Dimensions,
  Text,
} from 'react-native';

const App = () => {
  const [colors, setColors] = useState('rgba(237, 36, 46, 1)');
  const scrollY = useRef(new Animated.Value(300)).current;
  const currentHeight = useRef(300);

  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: (evt, gestureState) => {
        const newHeight = currentHeight.current - gestureState.dy;
        const clampedHeight = Math.min(
          Math.max(newHeight, 0),
          Dimensions.get('window').height,
        );
        scrollY.setValue(clampedHeight);
      },
      onPanResponderRelease: () => {
        currentHeight.current = scrollY._value;
      },
    }),
  ).current;

  useEffect(() => {
    const listener = scrollY.addListener(({value}) => {
      // console.log('ScrollY value changed:', value); // animail处的高度
      // console.log('Dimensions.get().height', Dimensions.get('window').height); // 设备总高度
      console.log(
        '上方View的高度等于总高度-下方animail的高度',
        Dimensions.get('window').height - value,
      );
      // 因为我这里需求是给View一个完整颜色,根据rgba值从0到1显示,因此我要将上面高度分成100份

      // 向上或者向下减少多少份 当前高度-总高度
      const nums =
        (Dimensions.get('window').height - value) /
        (Dimensions.get('window').height - 300);

      // 设置颜色
      setColors('rgba(237,36,46,' + nums + ')');
    });

    // 在组件卸载时移除监听器
    return () => {
      scrollY.removeListener(listener);
    };
  }, []);

  return (
    <View style={styles.container}>
      <View
        style={{
          backgroundColor: colors,
          width: 300,
          height: 50,
        }}></View>
      <Animated.View
        style={[
          styles.box,
          {
            height: scrollY.interpolate({
              inputRange: [0, 600],
              outputRange: [0, 600],
            }),
            backgroundColor: 'red',
          },
        ]}
        {...panResponder.panHandlers}>
        <SafeAreaView>
          {/* 占位内容 */}
          <Text>1111</Text>
        </SafeAreaView>
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  box: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
  },
});

export default App;

效果图 初始效果 当往上滑动时效果 可以看出滑动过程中上方块的背景色被改变了,我这个块当顶部就停止滑动了

下面是我项目里面需要用的效果,当到顶部时会把背景做个替换,这个也就是在代码里面的nums为0时,就是顶部可以在那里去做背景替换

相关推荐
永乐春秋25 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿26 分钟前
【前端】CSS
前端·css
ggdpzhk28 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic6 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā6 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue