declare module 'rc-bullets';

在src目录下新建一个types目录
在types 目录下新建一个 index.d.ts文件
添加代码 declare module 'rc-bullets';

import { Button } from 'antd'
import Head from 'next/head'
import type { NextPage } from 'next'
import Layout from '../components/Layout'
import * as echarts from 'echarts';
import { useEffect, useState } from 'react';
import styled from 'styled-components';
import BulletScreen, { StyledBullet } from 'rc-bullets';

/**
 * 文档
 * https://github.com/zerosoul/rc-bullets
 */

const bullet:NextPage = (props:any)=> {
  const [screen, setScreen] = useState<any>();
  const [bullet, setBullet] = useState('');
  const [bulletList,setBulletList] = useState<any>([])
  useEffect(() => {
    let s = new BulletScreen('.screen',{
      duration:10,
      animateTimeFun:'ease-in-out',
      loopCount:'infinite'
    });
    setScreen(s);

    // 从接口请求到数据
    setTimeout(() => {
      setBulletList([
        '张三',
        '李四',
        '王五',
        '赵六'
      ])
    }, 1000);
  }, []);
  useEffect(()=>{
    if (bulletList.length != 0){
      for (let i=0; i<bulletList.length; i++) {
        setTimeout( function timer() {
          screen.push(<div>{bulletList[i]}</div>)
        }, i*1000, i );
      }
    }
  },[bulletList])
  const handleChange = ({ target }:any) => {
    setBullet(target.value??'');
  };
  // 发送弹幕
  const handleSend = () => {
    if (bullet) {
      screen.push(<div style={{backgroundColor:'blue'}}>{bullet}</div>)
    }
  };
  return (
    <MainView>
      <div className="screen" style={{ width: '100vw', height: '80vh',backgroundColor:'red' }}></div>
      <input value={bullet} onChange={handleChange} />
      <button onClick={handleSend}>发送</button>
    </MainView>
  );

}
const MainView = styled.div`
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
`
export default bullet