React Native报Invalid hook call错误 国际象棋App开发Hook调用问题求解

• App.jsx导出逻辑错误：代码中写为export default App();，相当于直接执行了App函数，此时useState等Hook的调用时机不在函数组件的渲染上下文内，违反Hook只能在函数组件体内调用的规则，直接触发报错。
• 跨端逻辑混用：ChessBoard目录下的index.js是Web端入口写法，直接调用ReactDOM.render将组件渲染到DOM节点，而React Native无DOM概念，该写法完全不适用RN环境。
• 依赖不兼容：使用的react-dnd-html5-backend是基于HTML5拖放API的Web端依赖，React Native环境不支持该API，导入使用也会触发异常。
• 标签不兼容：App.jsx中使用的div、h2、button等都是Web端DOM标签，React Native无法识别这类标签，运行时也会出现报错。

1. 修正App.jsx导出语句，将export default App();修改为export default App;，仅导出组件本身，不要直接执行函数。
2. 拆分Web入口与通用组件，删除ChessBoard/index.js中的ReactDOM.render逻辑，改为导出可复用的组件，示例修改代码：

import React from "react";
import App from "./App";
import { DndProvider } from "react-dnd";
// Web端保留HTML5Backend，RN端需要替换为适配库
import { HTML5Backend } from "react-dnd-html5-backend";

export default function ChessGame() {
  return (
    <React.StrictMode>
      <DndProvider backend={HTML5Backend}>
        <App />
      </DndProvider>
    </React.StrictMode>
  );
}

3. React Native端适配修改：
   • 替换拖放依赖：将react-dnd-html5-backend替换为适配RN的react-dnd-touch-backend
   • 删除所有ReactDOM相关的导入与调用
   • 将App.jsx、Board组件中的div、h2、button等DOM标签全部替换为React Native对应的View、Text、TouchableOpacity等原生组件，CSS样式也需要改为RN支持的StyleSheet写法。
4. 建议将棋局核心逻辑（走棋规则、胜负判断、状态管理）抽离为独立的无UI依赖模块，Web端和RN端分别写对应的UI交互层，避免跨端代码混用。

内容的提问来源于stack exchange，提问作者Manubown