如果你已经掌握了 编写面板界面 这章中的界面编写方法，你或许会觉得这样编写界面有些繁琐。是否能够使用一些前端界面框架来提升界面编写效率呢？答案是肯定的。Cocos Creator 支持任何界面框架如 Vue，React、Polymer 等等。
官方明确说了 可以使用 可是 任何 引用框架的方法 都会报错找不到react 或者ElementUI
每个插件下都是一个完整的nodjs环境，你直接在插件下打开终端，安装nodejs模块就行了。但是，但是，creator不支持编译期加载。
- 创建空的html扩展模板
- 到模板代码文件夹中
- 安装依赖
npm install
npm i --save-dev typescript
npm install react react-dom
npm install --save-dev @types/react @types/react-dom
4.修改tsconfig.json添加react-jsx编译项
{
"extends": "./base.tsconfig.json",
"compilerOptions": {
"jsx": "react-jsx",
"outDir": "./dist",
"rootDir": "./source",
"types": [
"node",
"@cocos/creator-types/editor",
]
}
}
- 修改文件后缀
source/panels/default/index.ts -> index.tsx
- 挂载react root
// source/panels/default/index.tsx
...
ready() {
if (this.$.app) {
const root = createRoot(this.$.app);
root.render(<h4>Hello World</h4>)
}
}
...
- npm run build
在cocos creator 3.8.3测试可行
参考 GitHub - tsogzark/cocos-react-plugin-template: 使用react编写cocos creator的扩展。
1赞