如何在React Native中实现可上下滑动的通知指示器

原代码核心问题 #

• 动画属性选择错误：上下滑动需要使用translateY而非控制左右滑动的translateX
• 动画目标值逻辑错误：滑入和滑出的toValue完全一致，导致没有位移效果
• 定时器触发逻辑错误：滑出定时器直接定义在组件顶层，组件渲染就会执行，而非滑入完成后才触发
• 初始偏移值设置错误：要实现从顶部外滑入，初始偏移值应该为通知栏高度的负值
• 定时器清理逻辑错误：未做重复点击、组件卸载场景下的定时器清理，容易触发内存泄漏和异常动画

完整可运行实现代码 #

import React, { useRef, useEffect } from 'react';
import { View, Text, Button, Animated } from 'react-native';

const TopNotification = () => {
  // 初始偏移设为-100，对应通知初始位置在屏幕顶部外，可根据通知实际高度调整
  const animateValue = useRef(new Animated.Value(-100)).current;
  const hideTimer = useRef(null);

  const showNotification = () => {
    // 重复点击时先清空已有定时器，避免动画异常
    if (hideTimer.current) clearTimeout(hideTimer.current);
    // 滑入动画，偏移到0的位置即顶部停留位
    Animated.spring(animateValue, {
      toValue: 0,
      useNativeDriver: true,
      bounciness: 6 // 调整弹性效果，不需要可以改成0
    }).start();
    
    // 停留3秒后触发滑出动画
    hideTimer.current = setTimeout(() => {
      Animated.spring(animateValue, {
        toValue: -100,
        useNativeDriver: true
      }).start();
    }, 3000);
  };

  // 组件卸载时清理定时器，避免内存泄漏
  useEffect(() => {
    return () => {
      if (hideTimer.current) clearTimeout(hideTimer.current);
    };
  }, []);

  return (
    <View style={{flex: 1}}>
      <Animated.View 
        style={[
          { 
            position: 'absolute', 
            right: 0,
            left: 0,
            top: 0,
            backgroundColor: '#0400ff', 
            height: 100,
            width: '100%', 
          }, 
          { transform: [{ translateY: animateValue }] }
        ]}
      >
        <Text style={{ fontSize: 16, color: '#fff', alignSelf: 'center', marginTop: 45 }}>loading please wait...</Text>
      </Animated.View>

      <View style={{ marginTop: 200 }}>
        <Button
          title="Slide"
          onPress={showNotification}
        />
      </View>
    </View>
  );
};

export default TopNotification;

可优化扩展点 #

• 可以通过onLayout属性动态获取通知组件高度，不用写死偏移值
• 可将停留时长、通知样式、文本内容抽成props，封装为通用组件复用
• 可添加手势滑动关闭的交互逻辑

内容的提问来源于stack exchange，提问作者manny