技能 react-native-design
📦
react-native-design
内容修订 r1 安全 ⚙️ 外部命令🌐 网络访问
构建 React Native 移动端界面
React Native 团队需要能够跨平台工作的统一移动端 UI 模式。此技能提供实用的样式、导航、手势和动画指导。
支持: Claude Codex Code(CC)
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
智能体请求
Review the Skillstore skill "react-native-design" from https://skillstore.io/skills/wshobson-react-native-design.md and its manifest at https://skillstore.io/api/skills/wshobson-react-native-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智能体仍应展示其计划，并按安全策略请求必要确认。
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“react-native-design”。 为 React Native app 设计一个设置屏幕。
预期结果:
- 包含安全区域处理和分组设置区块的屏幕结构。
- 针对排版、间距、分隔线和按下状态的样式方案。
- 关于 iOS 和 Android 交互差异的说明。
正在使用“react-native-design”。 为包含已认证和公开屏幕的 app 规划导航。
预期结果:
- 使用 auth、stack 和 tab 流程的导航层级。
- 针对详情屏幕和 modals 的路由参数指导。
- 关于安全 token 存储和会话处理的警告。
正在使用“react-native-design”。 改进 bottom sheet 的动画性能。
预期结果:
- 使用 shared values 和 gesture handlers 的 Reanimated 方案。
- snap-point 行为和 spring 调优建议。
- 关于 UI-thread worklets 和清理的性能说明。
安全审计
安全v4 • 2026/7/8 打开版本化报告
All static findings were adjudicated as false positives after reviewing the cited markdown and TypeScript examples. The suspicious patterns are documentation fences, JavaScript template literals, React Navigation route keys, official documentation links, and ordinary mobile UI guidance. No prompt injection, secret handling, command execution, or data exfiltration intent was found.
4
已扫描文件
2,922
分析行数
0
复核项
0
已忽略误报
风险因素
⚙️ 外部命令 (36)
references/navigation-patterns.md:684-687 references/navigation-patterns.md:687-701 references/navigation-patterns.md:701-704 references/navigation-patterns.md:704-720 references/navigation-patterns.md:720-721 references/navigation-patterns.md:721-726 references/reanimated-patterns.md:30-59 references/reanimated-patterns.md:187-200 references/reanimated-patterns.md:511-520 references/reanimated-patterns.md:608-644 references/styling-patterns.md:306-313 SKILL.md:27-57 SKILL.md:57-61 SKILL.md:61-99 SKILL.md:99-105 SKILL.md:105-135 SKILL.md:135-141 SKILL.md:141-173 SKILL.md:173-181 SKILL.md:181-185 SKILL.md:185-219 SKILL.md:219-225 SKILL.md:225-254 SKILL.md:254-258 SKILL.md:258-295 SKILL.md:295-299 SKILL.md:299-326 SKILL.md:326-330 SKILL.md:330-412 SKILL.md:412-417 SKILL.md:417 SKILL.md:420 SKILL.md:427 SKILL.md:428-429 SKILL.md:429-431 SKILL.md:431
最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。
审计者: codex 查看审计历史 →
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/wshobson-react-native-design/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/wshobson-react-native-design?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/wshobson-react-native-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-react-native-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/wshobson-react-native-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学术引用 (APA · BibTeX · CFF)
APA 引用
wshobson. (2026). react-native-design security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-react-native-design/audits/4BibTeX 引用
@techreport{wshobson-wshobson-react-native-design-2026,
author = {wshobson},
title = {react-native-design security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/wshobson-react-native-design/audits/4},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "react-native-design security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "wshobson"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/wshobson-react-native-design/audits/4"
identifiers:
- type: other
value: "skillstore:wshobson-react-native-design:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore 评分
评分依据 证据置信度: 高 45
架构
85
可维护性
87
内容
72
社区
83
规范符合性
你能构建什么
设计移动端屏幕系统
为 React Native app 创建可复用的布局、间距、排版和组件模式。
规划应用导航
为跨平台 app 选择 stack、tab、drawer、modal、auth 和 deep-link 流程。
改进动效和手势
添加高性能的 Reanimated gestures、transitions 和交互式动画，且不阻塞 UI 线程。
试试这些提示
创建带样式的屏幕
使用此技能设计一个带有 StyleSheet、安全区域和无障碍文本层级的 React Native 个人资料屏幕。
构建导航流程
使用此技能为包含 home、search、detail、settings 和 auth 屏幕的 app 规划 stack 和 tab 导航。
添加手势动画
使用此技能设计一个使用 Gesture Handler 和 Reanimated shared values 的可滑动卡片交互。
审查移动端 UX 架构
使用此技能审计我的 React Native app 的导航一致性、平台差异、动画性能和样式复用。
最佳实践
- 在添加复杂导航流程之前，先使用 TypeScript route 和 component types。
- 在真实 iOS 和 Android 设备上测试布局和手势。
- 将动画保持在 UI 线程上，并在组件卸载时清理它们。
避免
- 不要将敏感 auth tokens 以明文形式存储在 AsyncStorage 中。
- 不要依赖单一平台模拟器来做最终 UI 决策。
- 当需要 FlatList 时，不要把长列表放在 ScrollView 中。
常见问题
此技能可以帮助构建什么？
它帮助为移动端 app 构建 React Native 样式系统、导航流程、手势和动画。
它涵盖哪个导航库？
它聚焦于 React Navigation 的 stacks、tabs、drawers、modals、auth flows 和 deep links 模式。
它涵盖 Reanimated 吗？
是的。它涵盖 Reanimated shared values、animated styles、gestures、transitions 和性能实践。
它能同时面向 iOS 和 Android 进行设计吗？
是的。它包括特定平台指导、安全区域、响应式尺寸和交互差异。
它是否提供完整的生产环境安全指导？
不能。安全敏感区域，尤其是 auth token 存储，需要单独的移动端安全审查。
Claude、Codex 和 Claude Code 可以使用它吗？
是的。报告列出了对 Claude、Codex 和 Claude Code 工作流的支持。
开发者详情
作者
wshobson许可证
MIT
Skillstore 修订
r1
版本提示
作者未声明版本。
引用
64ca8af0f54a325752f08bd54e52151061ea659a
维护新鲜度
2026/7/26
使用量
7 次下载 · 326 次浏览