通知
用于渲染游戏内通知的 Notifications 组件及 Notification 数据结构
Notifications 组件用于渲染通知框，提供自定义接口
数据结构
type Notification = {
message: string;
id: string;
}示例
- 导入组件
import { useState } from "react";
import { INotificationsProps, useGame } from "narraleaf-react";- 实现通知组件
function GameNotification({ notifications }: { notifications: Notification[] }) {
return (
<Notifications
className="absolute top-0 left-0 w-full h-full"
>
{notifications.map(({id, message}) =>
<div
key={id}
className="absolute top-0 left-0 w-[100px] h-[80px]"
>
<span className="text-white text-2xl font-bold">
{message}
</span>
</div>
)}
</Notifications>
);
}- 注册到游戏
function App() {
const game = useGame();
useEffect(() => {
game.configure({
notification: GameNotification,
});
}, []);
return /* ... */
}组件
Notifications
通知框容器
children: React.ReactNode- 子元素...props: React.HTMLAttributes<HTMLDivElement>- 其他属性