最新·通过 WebRTC 与手机配对 Issue 04·2026 设计免费·€19.99/月发布
Screenshotify
React Native 开发者方案

App Store 与 Play Store,一份设计搞定。

TL;DR. React Native 应用同时发布至两大商店。Screenshotify 从一份设计导出两个商店所需的全部尺寸矩阵,无需在两个设计工具中维护两套并行工作流。

React Native 应用默认运行于两个商店生态系统。截图工作通常涉及通过 Detox UI 测试采集原始模拟器帧,或在 Figma 中手动设计——同时打开 iPhone 预设和 Android 预设。Screenshotify 适用于你想要有设计感的营销截图(而非原始截图),并且希望同时覆盖两个商店的场景。

典型的 RN 截图日

  1. 从运行中的应用采集源帧——iOS Simulator 用 Cmd+S,Android Emulator 用截图按钮,或通过内置的 WebRTC 配对功能直接从真机传输。
  2. 打开 Screenshotify,搭建 3-5 个面板的轮播图。每个面板可使用不同的设备框架,因此可以在一个轮播图中混合展示 iPhone 和 Pixel。
  3. 添加文案,以源语言编写。多面板编排器让各面板的标题结构保持一致。
  4. 本地化。一键翻译至全部 39 种 App Store 语言。重点审查你的活跃市场所在语言(全球 RN 应用通常为 EN、JP、DE、BR、KR、ES)。
  5. 导出。一个 ZIP 包含已启用的 App Store 尺寸(6.9"、iPad 13" 等)和 Play Store 尺寸(默认 1080 × 1920)。

RN 生态中的替代方案

Detoxreact-native-testing-library 配合截图助手可从 UI 测试中获取原始帧,适合采集源截图,但不能替代营销排版步骤。Fastlane snapshot 在 RN 应用的 iOS 端(即真实的 Xcode 工程)可正常使用。

大多数 RN 团队的选择:通过模拟器或设备采集源截图,在 Screenshotify 中设计轮播图,将项目 JSON 版本化到与代码库相同的仓库中。

跨平台设计建议

  • 每个项目使用同一套设计系统,将其应用于 iOS 和 Android 截图——不要在两个商店之间切换字体或配色方案。
  • 状态栏存在差异。iOS 按惯例显示 9:41;Android 显示实际时间。Screenshotify 可按设备切换 iOS 状态栏;Android 截图中的状态栏保留操作系统原始状态。
  • 底部导航栏 vs 标签栏。不要裁掉这些元素——它们是用户在轮播图缩略图中最容易注意到的部分。
  • 5.5" iPhone 已成历史。除非你的 RN 应用支持 iOS 13(最低支持 iPhone 6s Plus),否则完全可以跳过 5.5" 尺寸。

学习: 功能 · 指南 · 价格

打开编辑器 →