如何在react原生中创建上下滑动通知指示器？

import React, { useState } from 'react';

const NotificationIndicator = () => {
  const [showIndicator, setShowIndicator] = useState(false);

  const handleScroll = () => {
    const scrollPosition = window.scrollY;
    if (scrollPosition > 0) {
      setShowIndicator(true);
    } else {
      setShowIndicator(false);
    }
  };

  window.addEventListener('scroll', handleScroll);

  return (
    <div className={`notification-indicator ${showIndicator ? 'show' : ''}`}>
      <span>New notifications</span>
    </div>
  );
};

export default NotificationIndicator;

import React from 'react';
import NotificationIndicator from './NotificationIndicator';

const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <NotificationIndicator />
      {/* 其他组件和内容 */}
    </div>
  );
};

export default App;