lucky-canvas
lucky-canvas copied to clipboard
buuing
taro4.0.7 运行报错 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
-
你当前是什么框架(必填)：taro-react
-
你使用的是哪个包(必填)："@lucky-canvas/taro": "^0.0.14"
-
你当前插件的版本(必填)："@lucky-canvas/taro": "^0.0.14"
-
当前环境是小程序还是浏览器(选填)：小程序
-
详细描述你的bug：
-
问题代码(重要)：
import type { FC } from 'react'
import { useRef } from 'react'
import { View } from '@tarojs/components'
import { LuckyGrid, type LuckyGridRef } from '@lucky-canvas/taro/react'
export const Lucky: FC = () => {
const luckyRef = useRef<LuckyGridRef>(null)
// 通用配置
const scale = 0.8 // 缩放比例
const cellImg = {
src: 'http://cdn.meizhuan.cn/pic-go-wf/cell-img.png',
activeSrc: 'http://cdn.meizhuan.cn/pic-go-wf/cell-img-active.png',
width: '100%',
height: '100%',
}
// 背景块
const blocks = [
{
padding: '20px',
imgs: [
{
src: 'http://cdn.meizhuan.cn/pic-go-wf/grid-bg.png',
width: '100%',
height: '100%',
},
],
},
]
// 奖品生成函数
const createPrize = (x: number, y: number, imgUrl: string, text: string) => ({
x,
y,
imgs: [
cellImg,
{
src: imgUrl,
width: `${138 * scale}rpx`,
height: `${138 * scale}rpx`,
top: '20rpx',
},
],
fonts: [{ text, fontSize: 14, top: `${138 * scale + 20}rpx` }],
})
// 奖品列表
const prizes = [
createPrize(0, 0, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-1.png', '最低红包'),
createPrize(1, 0, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-2.png', '随机红包'),
createPrize(2, 0, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-3.png', '最高红包'),
createPrize(2, 1, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-5.png', '免单'),
createPrize(2, 2, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-8.png', '外卖券'),
createPrize(1, 2, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-7.png', '神秘奖励'),
createPrize(0, 2, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-6.png', '外卖会员'),
createPrize(0, 1, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-4.png', '88元'),
]
// 按钮配置
const buttons = [
{
x: 1,
y: 1,
background: 'rgba(0,0,0,0)',
imgs: [
{
src: 'http://cdn.meizhuan.cn/pic-go-wf/grid-start-btn.png',
width: '100%',
height: '100%',
},
],
},
]
// 开始游戏
const handleStart = () => {
console.log('onStart', luckyRef.current)
luckyRef.current?.play()
setTimeout(() => {
luckyRef.current?.stop(1)
}, 2000)
}
return (
<View className="mx-3 mt-3 rounded-md bg-white py-5">
<LuckyGrid
ref={luckyRef}
width="650rpx"
height="650rpx"
blocks={blocks}
prizes={prizes}
buttons={buttons}
onStart={handleStart}
/>
<View className="mt-4 text-center">剩余 0 次</View>
</View>
)
}
解决了，直接使用 "lucky-canvas": "^1.7.27",插件把他的 taro的 插件代码复制过来， 自己新建一个js就可以了 使用的话 直接使用这个js就好了
- 你当前是什么框架(必填)：taro-react
- 你使用的是哪个包(必填)："@lucky-canvas/taro": "^0.0.14"
- 你当前插件的版本(必填)："@lucky-canvas/taro": "^0.0.14"
- 当前环境是小程序还是浏览器(选填)：小程序
- 详细描述你的bug：
* 问题代码(重要)：
import type { FC } from 'react' import { useRef } from 'react' import { View } from '@tarojs/components' import { LuckyGrid, type LuckyGridRef } from '@lucky-canvas/taro/react' export const Lucky: FC = () => { const luckyRef = useRef<LuckyGridRef>(null) // 通用配置 const scale = 0.8 // 缩放比例 const cellImg = { src: 'http://cdn.meizhuan.cn/pic-go-wf/cell-img.png', activeSrc: 'http://cdn.meizhuan.cn/pic-go-wf/cell-img-active.png', width: '100%', height: '100%', } // 背景块 const blocks = [ { padding: '20px', imgs: [ { src: 'http://cdn.meizhuan.cn/pic-go-wf/grid-bg.png', width: '100%', height: '100%', }, ], }, ] // 奖品生成函数 const createPrize = (x: number, y: number, imgUrl: string, text: string) => ({ x, y, imgs: [ cellImg, { src: imgUrl, width: `${138 * scale}rpx`, height: `${138 * scale}rpx`, top: '20rpx', }, ], fonts: [{ text, fontSize: 14, top: `${138 * scale + 20}rpx` }], }) // 奖品列表 const prizes = [ createPrize(0, 0, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-1.png', '最低红包'), createPrize(1, 0, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-2.png', '随机红包'), createPrize(2, 0, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-3.png', '最高红包'), createPrize(2, 1, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-5.png', '免单'), createPrize(2, 2, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-8.png', '外卖券'), createPrize(1, 2, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-7.png', '神秘奖励'), createPrize(0, 2, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-6.png', '外卖会员'), createPrize(0, 1, 'http://cdn.meizhuan.cn/pic-go-wf/2024-12-27-grid-prize-4.png', '88元'), ] // 按钮配置 const buttons = [ { x: 1, y: 1, background: 'rgba(0,0,0,0)', imgs: [ { src: 'http://cdn.meizhuan.cn/pic-go-wf/grid-start-btn.png', width: '100%', height: '100%', }, ], }, ] // 开始游戏 const handleStart = () => { console.log('onStart', luckyRef.current) luckyRef.current?.play() setTimeout(() => { luckyRef.current?.stop(1) }, 2000) } return ( <View className="mx-3 mt-3 rounded-md bg-white py-5"> <LuckyGrid ref={luckyRef} width="650rpx" height="650rpx" blocks={blocks} prizes={prizes} buttons={buttons} onStart={handleStart} /> <View className="mt-4 text-center">剩余 0 次</View> </View> ) }
使用这段代码并未发现问题
{
"@lucky-canvas/taro": "^0.0.14",
"@tarojs/taro": "4.0.7",
}
{
"node": "22.13.0"
}
