AI 摘要：本文详细介绍了如何使用 React Native、Expo、NativeWind 和 Reanimated 开发一款快节奏的移动游戏 NeonCity。作者分享了从灵感来源到具体技术实现的完整开发过程，涵盖了游戏的 UI 设计、手势检测、精灵图技术（Sprite Sheet）优化、性能提升以及使用 EAS Build 进行部署的经验。NeonCity 是一款设定在未来城市背景下的休闲游戏，玩家通过滑动屏幕匹配箭头方向以获得高分，游戏结合了快节奏的音乐和炫酷的视觉效果。

• 引言与灵感来源：作者受《赛博朋克：边缘行者》的启发，与设计师 Woojae Lee 合作，在 2023 年夏天启动 NeonCity 项目，目标是打造一款视觉效果出色的未来城市游戏。
• NeonCity 游戏简介：游戏设定在 2077 年的未来城市，玩家需在 1 分钟内通过滑动屏幕匹配从上方落下的箭头方向，连续准确操作可获得连击加分，使用倍率道具可进一步提升分数，配合城市风格的快节奏音乐和炫目视觉效果。
• 技术架构概述：文章介绍了使用 React Native 和 Expo 构建游戏的技术决策，展示了如何通过现代工具和技术实现跨平台移动游戏开发。
• UI 设计：使用 NativeWind 构建 UI，确保跨平台一致的用户体验，并简化维护。
• 手势检测：通过 react-native-gesture-handler 的 Pan Gesture 自定义钩子实现四个方向的手势检测（上、下、左、右），利用三角函数计算手势角度以优化性能。
• 精灵图技术（Sprite Sheet）：采用精灵图技术优化游戏中箭头的持续下落动画，将多个精灵图合并为单张大图，通过调整视口显示特定精灵，减少网络请求和内存使用，提升渲染性能。
• 实现方式：使用 React Native 和 Reanimated 的样式能力，通过 translateX 和 translateY 属性动态裁剪精灵图，确保只显示目标精灵。
• 避免不必要的重新渲染：使用 Reanimated 的共享值（Shared Values）在 UI 线程直接更新精灵位置，绕过 React 渲染周期，实现 60 FPS 的流畅动画。
• 游戏部署：选择 Expo 作为开发平台，利用 Expo SDK 处理原生代码生成（Expo CNG）和 SDK 版本管理，使用 EAS Build 简化 Android 和 iOS 部署流程，近期引入的 M4 Pro 工作线程将 iOS 构建速度提升了 1.85 倍。
• 开源与致谢：作者将 NeonCity 项目开源，鼓励更多开发者使用 React Native 和 Expo 开发应用，并感谢了项目中提供设计、代码审查和图形反馈的团队成员。
• 总结与资源推荐：作者推荐了学习 Reanimated 的教程资源，并提供了 NeonCity 的 GitHub 仓库链接，供开发者参考和学习。

Expo Blog

Building NeonCity: A fast-paced mobile game made with React Native, Reanimated, and Expo

Learn how NeonCity was built with React Native, Expo, NativeWind, and Reanimated—featuring sprite sheets, gesture detection, and EAS Build for deployment.