要在 react native 项目中用 codegeex 生成跨平台兼容代码,必须四步:① 强制注入 platform 检测逻辑;② 提供三端 api 映射表;③ 明确条件渲染文件命名与约束;④ 用 cli 生成平台桥接桩并校验 web 实现。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

要在 React Native 项目中用 CodeGeex 针对性生成能规避 iOS/Android/Web 差异的代码,不能只靠模糊描述,必须让模型明确感知平台边界、API 可用性与降级路径。
第一步:在提示中强制注入平台检测逻辑
在 CodeGeex 输入框顶部,先粘贴当前项目中已有的 Platform 检测片段,例如:import { Platform } from 'react-native'; const isIOS = Platform.OS === 'ios'; const isWeb = typeof window !== 'undefined' && window.document;。这一步不是可选动作——【缺少该上下文时,CodeGeex 默认按纯 RN 原生环境生成,会遗漏 Web 端兼容逻辑】。
接着换行输入需求,例如:“基于以上平台判断,写一个安全区域适配的容器组件,iOS 加 safeAreaInsets.top,Android 不加,Web 端用 CSS @media 查询模拟安全区”。
第二步:为关键能力提供三端 API 映射表
当涉及摄像头、定位、文件系统等原生能力时,在提示中直接列出各端可用方案:
方法一:用注释块声明映射关系
“// 摄像头调用方案:iOS → react-native-vision-camera;Android → 同上;Web → navigator.mediaDevices.getUserMedia”
方法二:给出已有封装层路径
“项目已封装 /lib/camera.ts:export function openCamera() { if (isWeb) return webOpen(); if (isIOS) return iosOpen(); … }”
这一步操作起来很简单,直接把项目里真实的封装函数签名复制进去就行。没有这层映射,CodeGeex 会默认使用最通用但不可运行的伪代码。
第三步:指定条件渲染的文件命名策略
React Native 官方支持 .ios.js/.android.js/.web.js 后缀自动匹配,但 CodeGeex 不会主动遵循——你必须在提示中明示:
① 先写结论:“请按 RN 官方条件文件规则输出三份代码:Button.js(共享逻辑)、Button.android.js(仅 Android 特有样式)、Button.web.js(Web 专用事件绑定)”
② 接着说明差异点:“Button.web.js 中禁用 TouchableOpacity,改用 onPress → onClick 转换,并引入 react-router-dom 的 useNavigate”
③ 补充约束:“所有 .web.js 文件开头必须有 'use client',且不引用任何原生模块如 NativeModules”
这三步缺一不可。漏掉第③步会导致生成的 Web 文件在 Next.js App Router 下直接报错。
第四步:用 CodeGeex CLI 批量生成平台桥接桩
进入项目根目录,执行:npx codegeex-cli generate --template platform-bridge --props "apiName=geolocation,platforms=ios,android,web"。
该命令会自动生成三个空实现文件:geolocation.ios.ts、geolocation.android.ts、geolocation.web.ts,并在 index.ts 中导出统一接口。生成后立刻检查 【geolocation.web.ts 是否使用了 @googlemaps/js-api-loader 而非 navigator.geolocation】——后者在部分 WebView 中不可用。











