pxcook导出react native样式需启用rn插件、切换兼容模式、使用dimensions适配模板、手动修正阴影/圆角/字体等不兼容项，并可用pxcook-cli批量生成。
如果您在使用PxCook进行设计稿标注后，需要将样式信息转换为React Native可直接使用的代码片段，则可能遇到样式单位不匹配、布局属性映射缺失或颜色值未自动转为十六进制等问题。以下是生成RN样式代码片段的具体操作路径与适配方法：
一、启用PxCook的React Native导出插件
PxCook 4.x 版本起内置支持 React Native 样式导出，但需手动激活对应插件模块，确保导出器识别 Flex 布局规则及平台特有属性（如 borderBottomWidth 而非 border-bottom-width）。
1、打开 PxCook 软件，进入「设置」→「插件管理」→「样式导出」。
2、在插件列表中找到 React Native (Flex) 插件，点击右侧「启用」按钮。
3、重启 PxCook，使插件加载生效。
二、配置导出参数为RN兼容模式
默认导出为 Web CSS，需切换目标平台为 React Native，以触发单位换算（px → dp）、属性重命名（backgroundColor → backgroundColor）、以及去除不支持的 CSS 属性（如 float、z-index）。
1、在画布中选中一个图层或组件，右键选择「复制样式」→「导出为代码」→「React Native」。
2、点击「高级设置」，将「单位基准」设为 iPhone 6/7/8（375pt 宽），确保缩放系数自动应用为 1x。
3、勾选「输出 StyleSheet.create」，取消勾选「包含注释」以获得纯净可粘贴代码。
三、使用自定义模板导出带Dimensions适配的样式
原生 RN 项目常依赖 Dimensions 或 PixelRatio 进行动态适配，标准导出不包含该逻辑，需通过自定义模板注入设备宽度计算逻辑。
1、进入「设置」→「导出模板」→「新建模板」，命名为 RN-Dimensions-Adapt。
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
2、在模板编辑区粘贴以下结构（保留 ${style} 占位符）：
const { width } = Dimensions.get('window');
export default StyleSheet.create({
container: {
${style}
}
});
3、保存后，在导出界面选择该模板，再执行「导出为代码」。
四、手动修正导出结果中的常见不兼容项
PxCook 对阴影（shadow）、圆角（borderRadius）、字体族（fontFamily）等属性的 RN 映射存在局限，需人工校验并替换为平台可用值。
1、将导出代码中 boxShadow 替换为 shadowColor、shadowOffset、shadowRadius、shadowOpacity 四个独立属性。
2、将 borderTopLeftRadius 等复合圆角属性，拆分为 borderTopLeftRadius: value 单独声明。
3、将字体族名如 "PingFang SC" 替换为 RN 安全字体栈："System", "Helvetica", "Arial"。
五、通过命令行工具 pxcook-cli 批量生成RN样式文件
当设计稿含数十个页面时，GUI 导出效率低下，可借助官方 CLI 工具实现批量解析与样式文件生成，支持 JSON 配置驱动导出行为。
1、在终端执行 npm install -g pxcook-cli 安装全局工具。
2、使用 pxcook export --type rn --input ./design.pxcook --output ./src/styles/ 启动批量导出。
3、创建 pxcook.config.js 文件，指定 unitScale: 1, platform: 'ios' 等关键参数。
