IOS苹果机型会卡死，白屏

[chenzhengWin]

• 你当前是什么框架(必填)： React 18.2.0, 研发h5页面，需要在app和小程序内打开页面

• 你使用的是哪个包(必填)： "@lucky-canvas/react": "^0.1.13",

• 你当前插件的版本(必填)： 0.1.13

• 当前环境是小程序还是浏览器(选填)： 浏览器

• 详细描述你的bug： 苹果机型有卡死、白屏、不能滚动现象。 可以看到谷歌浏览器打开的效果正常，但memory 机型和现象：

  1. iphone12 mini 现象：抽奖机里的图片加载很慢，点立即抽奖 基本不会滚动 ，但可以抽到奖，有抽奖结果提示 现象2： 在页面停留久了，抽奖机会自己缩小，原来是正常的。

  2. iphoneXs Max 系统版本14，现象：刚进抽奖页面不一会就白屏，卡死

• 问题代码(重要)：

// 代码开始, 别再放歪了行吗
export const LotteryMachine = forwardRef((props: IProps, ref: any) => {
  const myLucky = useRef<any>()
  const awardModalRef = useRef<{ openModal: Function }>()
  const { className, speed, setSpeed, prizeList = [], handleSetLotteryStatus } = props
  const [prizeInfo, setPrizeInfo] = useState<gameDeductChanceLottery.ResponseContentPrize>({}) // todo mock数据
  const [key, setKey] = useState({})

  useImperativeHandle(ref, () => ({
    onPlayLottery: () => myLucky?.current?.play(),
    onStopLottery: (prizeInfo: any) => {
      myLucky.current?.stop(prizeInfo?.rank)
      setPrizeInfo(prizeInfo)
    },
  }))
  const data = [
    {
      name: '最大奖-免房红包100元',
      bgImg: $tools.IMGV2_BIG_AWARD_BG,
      img: $tools.IMGV2_LOTTERY_DEFAULT_AWARD,
      bgWidth: '56px',
      bgHeight: '56px',
      width: '40px',
      height: '40px',
      fontColor: '#fff',
      background: '#b6c8f6',
    },
    {
      name: '1元打哈还是好得很红包',
      bgImg: $tools.IMGV2_COMMON_AWARD_BG,
      img: $tools.IMGV2_LOTTERY_DEFAULT_AWARD,
      fontColor: '#616161',
      background: '#8c9eed',
    },
    {
      name: '100元红包',
      bgImg: $tools.IMGV2_COMMON_AWARD_BG,
      img: $tools.IMGV2_LOTTERY_DEFAULT_AWARD,
      ackground: '#b6c8f6',
    },
    {
      name: '0.5元红包',
      bgImg: $tools.IMGV2_COMMON_AWARD_BG,
      img: $tools.IMGV2_LOTTERY_DEFAULT_AWARD,
      ackground: '#b6c8f6',
    },
    {
      name: '2元红包',
      bgImg: $tools.IMGV2_COMMON_AWARD_BG,
      img: $tools.IMGV2_LOTTERY_DEFAULT_AWARD,
      ackground: '#b6c8f6',
    },
  ]

  const prizes = []
  for (let i = 0; i < data.length; i++) {
    let item = data[i]
    prizes.push({
      name: item.name,
      index: i,
      background: item.background,
      borderRadius: '10px',
      fonts: [
        {
          text: item.name,
          top: '44px',
          lengthLimit: '44px', // 文字宽度
          lineClamp: 1,
          fontColor: item.fontColor || '#616161',
          fontSize: '8px',
        },
      ],
      imgs: [
        { src: item.bgImg, width: '60px', height: '60px' },
        { src: item.img, width: item.width || '40px', height: item.height || '40px', top: '4px' },
      ],
    })
  }
// 代码开始, 别再放歪了行吗
  const state = {
    blocks: [
      // 老虎机背景
      {
        imgs: [{ src: $tools.IMGV2_LOTTERY_GUN_ZHOU, height: '100%', width: '100%' }],
      },
    ],
    prizes,
    slots: [{}, {}, {}],
    defaultStyle: {
      fontColor: '#616161',
      fontSize: '14rpx',
      textAlign: 'center',
    },
    defaultConfig: {
      rowSpacing: '10px',
      colSpacing: '8px',
    },
  }

  return (
    <div className={className}>
      <SlotMachine
        ref={myLucky}
        width={'15.62rem'} // 250px
        height={'7.25rem'} // 116px
        blocks={state.blocks}
        prizes={state.prizes}
        slots={state.slots}
        defaultStyle={state.defaultStyle}
        defaultConfig={state.defaultConfig}
        onStart={() => {}}
        onEnd={(prize: { name: string }) => {
          alert('恭喜获得大奖:' + prize.name)
        }}
      />
    </div>
  )
}
// 代码结束