资源 [NUI] FiveM + ReactJS 简单模板

[Yann]

要求​

• NodeJS 7

用法​

1.克隆存储库

git clone https://github.com/KPGTB/ Fivem-react-template.git

您还可以下载该模板或从中创建新的存储库。

2.在 web/react 中打开终端并安装节点包

npm i

3.更改名称、描述等在

• fxmanifest.lua
• web/react/package.json
• web/react/src/index.html

4.根据需要编辑您的代码
5.更改 web/react 后，您需要构建 React 项目

npm run build

注意：​

• 不要使用 Webpack 服务。始终构建项目并在游戏中检查它
• 您需要将每个样式表导入到 web/styles/main.css 中。不要将样式导入 React 组件！

@import url(PATH_TO_CSS_FILE);

• 所有资源路径必须依赖于 web/build/index.html 文件。不要将资源导入到 React 组件中！

例子​

• 图片路径：web/assets/image.png
• 每个组件中图像的路径：../assets/image.png

• 图片路径：web/assets/inventory/icons/apple.png
• 每个组件中图像的路径：../assets/inventory/icons/apple.png

项目结构​

• client - 客户端 Lua 脚本
  • client.lua - NUI 切换示例
  • React.lua - React- Fivem 连接的 Lua 实用程序

• server - 服务器端 Lua 脚本
• web-NUI
  • assets- NUI 资产，例如图像
    • logo.png - 示例资源
  • styles - NUI 样式 (CSS)
    • main.css - 主 CSS 文件
    • app.css - 示例应用程序组件样式
  • build - 包含已构建节点项目的文件夹
  • react - ReactJS 前端
    • src - 节点项目的来源
      • components - ReactJS 的组件
      • pages - ReactJS 的页面（代表页面的组件）
      • utils - 一些实用程序
        • FiveM.js - React- Fivem 连接的 JS 实用程序
      • App.jsx - 包含基本 ReactJS 组件的文件 + 小示例

实用程序​

在此模板中，我添加了一些有助于 React- Fivem 连接的实用程序。

Lua Utils（客户端)​

1.向 ReactJS 发送消息

SendReactMessage(action, data)

action - 带有操作名称的文本（将在 js 中使用）
data - 消息数据。它可以是文本、数字、布尔值、表格等。
例子：

SendReactMessage("hello", "world")

2.设置 NUI 的可见性

SetReactVisible(visible)

visible - true 或 false

3.切换 NUI 的可见性

ToggleReactVisible()

4.检查 NUI 是否可见

IsReactVisible()

JS 工具​

要更改默认可见性，请转到 web/react/src/App.jsx 并更改可见状态值
1.处理来自 NUI 的消息

useNui(action, handler)

action - 动作名称
handler - 来自 FiveM 的消息后将执行的函数

例子：

useNui("hello", (data) => console.log(data))

该函数将从名为 hello 的消息中接收到的数据打印到控制台中。请参阅 Lua Utils（客户端）部分来检查从 Lua 发送消息。在这种情况下，它应该打印 world

2.向Lua发送数据

callNui(action, data, handler)

action - NUI 回调的名称
data - 要发送的数据
handler - 回调后将调用的函数

例子：
Lua

RegisterNUICallback("example", function(data,cb)
    print(data)
    cb("sth")
end)

JS

callNui('example', "test", (data) => console.log(data))

什么功能将做什么：​

1. FiveM 将使用名称示例注册回调 ReactJS
2. 将使用名称 example 向 FiveM 的回调发送测试
3. FiveM 将把示例打印到控制台，并发送带有文本的回调
4. ReactJS 将打印到控制台响应中

代码中的示例​

在该模板中，我添加了一些示例。创建新资源时将其删除。

• client/client.lua - 第 1-3 行
• web/assets/logo.png web/styles/app.css （不要忘记从 web/styles/main.css 中删除导入）
• web/react/App.jsx - 第 13-14 行

License​

Apache 2.0

下载​

要查看隐藏内容, 你需要 登录 或者 注册.