这次我们来看一个 React Native 的实战项目构建一款移动端的《记忆翻牌游戏》。对于想入门跨平台移动开发尤其是对游戏化应用感兴趣的前端开发者来说这是一个绝佳的练手机会。React Native 允许你用熟悉的 JavaScript 和 React 语法来开发原生体验的 iOS 和 Android 应用而《记忆翻牌》这类游戏逻辑清晰、UI交互丰富能覆盖从组件构建、状态管理到手势交互的核心技能点。本文不会空谈概念而是直接带你从零搭建一个可运行的游戏。我们会重点关注项目初始化是否顺利、如何解决常见的“启动白屏”问题、游戏核心逻辑如何实现、以及最终如何在真机或模拟器上跑起来。如果你关心 React Native 的实战入门、想了解其在国内开发环境下的注意事项或者单纯想做出一个能分享给朋友的小游戏那么这篇文章可以直接跟着操作。1. 核心能力速览在动手之前我们先快速了解这个项目能做什么以及你需要准备什么。能力项说明项目类型React Native 跨平台移动应用游戏技术栈React Native, React, JavaScript/TypeScript, Expo (可选)目标平台iOS Android核心功能记忆翻牌游戏逻辑配对、计时、计分、触控交互、游戏状态管理开发环境Node.js, Watchman (macOS), Android Studio / Xcode (用于模拟器或真机调试)硬件门槛普通开发电脑即可无需独立显卡。内存建议 8GB 以上。启动方式通过npx react-native run-ios或run-android命令启动。是否支持真机调试是可通过 USB 连接或局域网进行调试。适合场景React Native 初学者实战、移动端游戏原型开发、学习状态管理与动画。2. 适用场景与使用边界这个项目非常适合以下几类开发者React Web 开发者希望将技能扩展到移动端理解 Native 组件与布局。移动开发初学者想通过一个完整、有趣的项目入门而非枯燥的待办事项应用。寻找练手项目者需要一个逻辑完整、UI有挑战性但复杂度可控的实战案例。它能帮你解决的问题理解 React Native 项目结构从初始化到运行的全流程。掌握核心 API使用View,Text,Image,TouchableOpacity等基础组件构建界面。实践状态管理如何用 React 的useState,useEffect来管理游戏数据卡牌状态、分数、时间。实现交互与动画处理卡牌点击事件并添加翻转动画效果。完成跨平台调试学会在 iOS 模拟器和 Android 模拟器上运行应用。需要注意的边界性能极限对于极其复杂或需要高性能图形渲染的硬核游戏React Native 可能不是最优选应考虑原生开发或游戏引擎。国内网络环境初始化项目或安装依赖时可能会因网络问题导致失败需要配置镜像源。原生模块本项目为纯 JavaScript 实现不涉及原生模块Native Modules开发。如需调用摄像头等特定设备功能需额外学习。3. 环境准备与前置条件开始编码前请确保你的开发环境已就绪。这是避免后续“跑不起来”的关键一步。3.1 基础软件安装Node.js 与 npm访问 Node.js 官网下载并安装 LTS 版本。安装后在终端运行node -v和npm -v检查版本。React Native CLI这是官方命令行工具。全局安装它npm install -g react-native-cli对于 macOS 用户可能需要sudo。3.2 平台特定环境对于 Android 开发安装 Java Development Kit (JDK)需要 JDK 11。你可以通过java -version检查。安装 Android Studio这不仅是一个 IDE更重要的是它提供了 Android SDK 和模拟器。下载安装后打开 Android Studio在欢迎界面进入More Actions-SDK Manager。在SDK Platforms选项卡中勾选最新版的 Android API 级别例如 Android 13.0 “Tiramisu”。在SDK Tools选项卡中勾选 “Android SDK Build-Tools” “Android Emulator” “Android SDK Platform-Tools”。配置环境变量将 Android SDK 路径添加到系统环境变量。Windows添加ANDROID_HOME变量值为你的 SDK 路径如C:\Users\你的用户名\AppData\Local\Android\Sdk并将%ANDROID_HOME%\platform-tools和%ANDROID_HOME%\tools添加到Path。macOS/Linux在~/.zshrc或~/.bash_profile中添加export ANDROID_HOME$HOME/Library/Android/sdk export PATH$PATH:$ANDROID_HOME/emulator export PATH$PATH:$ANDROID_HOME/platform-tools export PATH$PATH:$ANDROID_HOME/tools export PATH$PATH:$ANDROID_HOME/tools/bin然后执行source ~/.zshrc。对于 iOS 开发 (仅限 macOS)安装 Xcode从 Mac App Store 安装。这是开发 iOS 应用的必需品。安装 CocoaPods这是一个 iOS 依赖管理工具在终端运行sudo gem install cocoapods3.3 解决国内网络问题重要由于某些资源位于国外国内直接访问可能很慢或失败。建议立即配置镜像源# 设置 npm 淘宝镜像 npm config set registry https://registry.npmmirror.com/ # 设置 Yarn 的镜像如果你用 Yarn yarn config set registry https://registry.npmmirror.com/对于 Android可以在android/build.gradle文件中修改仓库地址为国内镜像但这通常在项目创建后才需要处理。4. 创建项目与启动环境准备好后我们开始创建游戏项目。4.1 初始化新项目打开终端进入你希望存放项目的目录执行以下命令npx react-native init MemoryCardGame --template react-native-template-typescript这里我们使用--template react-native-template-typescript来创建一个 TypeScript 项目这有助于代码维护。如果你偏好纯 JavaScript可以去掉这个参数。这个过程会下载模板并安装所有依赖可能需要几分钟。如果卡住或报网络错误请检查你的网络和镜像源配置。4.2 首次启动与“白屏”问题排查项目创建成功后进入项目目录并尝试运行运行 iOS (macOS):cd MemoryCardGame npx react-native run-ios运行 Android:确保你的 Android 模拟器已经启动可以从 Android Studio 的 AVD Manager 启动或者安卓手机已通过 USB 连接并开启调试模式。cd MemoryCardGame npx react-native run-android首次启动常见问题——“白屏”如果应用启动后只有白色屏幕没有显示默认的欢迎文字可以按以下步骤排查检查 Metro Bundler运行run-ios或run-android后会启动一个 Metro 终端窗口。确保它没有报错并且显示Loading dependency graph, done.。重新加载在模拟器或真机上按CmdR(iOS) 或RR(Android) 手动重新加载 JS 包。检查设备连接对于 Android 真机确保电脑和手机在同一 WiFi 下或者正确配置了 USB 调试。有时需要运行adb reverse tcp:8081 tcp:8081来反向代理端口。清除缓存停止 Metro 服务 (在它的终端按CtrlC)然后删除缓存并重启npx react-native start --reset-cache然后在另一个终端重新运行run-ios或run-android。当你能看到默认的 “Welcome to React Native” 屏幕时说明基础环境已打通。5. 构建游戏核心逻辑与组件现在我们来替换默认应用实现记忆翻牌游戏。我们将创建几个核心组件Card单张卡牌、GameBoard游戏面板和GameInfo显示分数和时间的面板。5.1 准备游戏资源在项目根目录下创建一个assets文件夹里面再创建images文件夹。准备若干张成对的图片作为卡牌背面图案。例如准备 8 张不同的图片每张复制一份共 16 张用于 8 对卡牌。将它们放入assets/images。5.2 创建 Card 组件在项目根目录创建components/Card.tsximport React, { useRef, useEffect } from react; import { View, Image, TouchableOpacity, Animated, StyleSheet, Dimensions, } from react-native; interface CardProps { id: number; imageUrl: any; // 使用 require 引入的本地图片资源 isFlipped: boolean; isMatched: boolean; onPress: (id: number) void; } const Card: React.FCCardProps ({ id, imageUrl, isFlipped, isMatched, onPress }) { const flipAnimation useRef(new Animated.Value(0)).current; useEffect(() { Animated.timing(flipAnimation, { toValue: isFlipped || isMatched ? 1 : 0, duration: 300, useNativeDriver: true, }).start(); }, [isFlipped, isMatched]); const frontInterpolate flipAnimation.interpolate({ inputRange: [0, 1], outputRange: [0deg, 180deg], }); const backInterpolate flipAnimation.interpolate({ inputRange: [0, 1], outputRange: [180deg, 360deg], }); const frontAnimatedStyle { transform: [{ rotateY: frontInterpolate }], }; const backAnimatedStyle { transform: [{ rotateY: backInterpolate }], }; // 卡牌尺寸计算适应不同屏幕 const { width } Dimensions.get(window); const cardSize (width - 60) / 4; // 假设4列两边各留30边距 return ( TouchableOpacity activeOpacity{0.8} onPress{() !isFlipped !isMatched onPress(id)} disabled{isFlipped || isMatched} View style{[styles.cardContainer, { width: cardSize, height: cardSize }]} {/* 卡牌背面 */} Animated.View style{[styles.cardFace, styles.cardBack, backAnimatedStyle]} View style{styles.cardBackPattern} / /Animated.View {/* 卡牌正面图片 */} Animated.View style{[styles.cardFace, styles.cardFront, frontAnimatedStyle]} Image source{imageUrl} style{styles.cardImage} resizeModecover / /Animated.View /View /TouchableOpacity ); }; const styles StyleSheet.create({ cardContainer: { margin: 5, }, cardFace: { position: absolute, width: 100%, height: 100%, backfaceVisibility: hidden, borderRadius: 10, justifyContent: center, alignItems: center, borderWidth: 2, borderColor: #FFF, }, cardBack: { backgroundColor: #4A90E2, }, cardBackPattern: { width: 70%, height: 70%, backgroundColor: #7BAFEB, borderRadius: 5, }, cardFront: { backgroundColor: #FFF, }, cardImage: { width: 90%, height: 90%, borderRadius: 8, }, }); export default Card;5.3 创建 GameBoard 和 GameInfo 组件创建components/GameBoard.tsx和components/GameInfo.tsx。GameBoard负责渲染网格状的卡牌GameInfo显示时间、步数和分数。GameBoard.tsx (核心逻辑所在地):import React, { useState, useEffect } from react; import { View, StyleSheet, Alert } from react-native; import Card from ./Card; // 模拟卡牌数据 const initialCards [ { id: 1, image: require(../assets/images/icon1.png), matched: false }, { id: 2, image: require(../assets/images/icon1.png), matched: false }, { id: 3, image: require(../assets/images/icon2.png), matched: false }, { id: 4, image: require(../assets/images/icon2.png), matched: false }, // ... 添加更多成对的卡牌总共建议8对16张 ]; const GameBoard: React.FC () { const [cards, setCards] useState(initialCards); const [flippedIds, setFlippedIds] useStatenumber[]([]); const [moves, setMoves] useState(0); const [gameOver, setGameOver] useState(false); // 洗牌函数 const shuffleCards (array: any[]) { return [...array].sort(() Math.random() - 0.5); }; // 初始化或重置游戏 const resetGame () { const shuffledCards shuffleCards(initialCards); setCards(shuffledCards.map(card ({ ...card, matched: false }))); setFlippedIds([]); setMoves(0); setGameOver(false); }; // 处理卡牌点击 const handleCardPress (id: number) { if (flippedIds.length 2 || flippedIds.includes(id)) return; const newFlippedIds [...flippedIds, id]; setFlippedIds(newFlippedIds); setMoves(prev prev 1); if (newFlippedIds.length 2) { const [firstId, secondId] newFlippedIds; const firstCard cards.find(c c.id firstId); const secondCard cards.find(c c.id secondId); if (firstCard?.image secondCard?.image) { // 匹配成功 setCards(prevCards prevCards.map(card card.id firstId || card.id secondId ? { ...card, matched: true } : card ) ); setFlippedIds([]); } else { // 匹配失败翻回去 setTimeout(() setFlippedIds([]), 800); } } }; // 检查游戏是否结束 useEffect(() { if (cards.length 0 cards.every(card card.matched)) { setGameOver(true); Alert.alert(恭喜, 你用了 ${moves} 步完成了游戏, [ { text: 再玩一次, onPress: resetGame }, ]); } }, [cards]); // 游戏初始化 useEffect(() { resetGame(); }, []); return ( View style{styles.board} {cards.map(card ( Card key{card.id} id{card.id} imageUrl{card.image} isFlipped{flippedIds.includes(card.id) || card.matched} isMatched{card.matched} onPress{handleCardPress} / ))} /View ); }; const styles StyleSheet.create({ board: { flexDirection: row, flexWrap: wrap, justifyContent: center, padding: 15, }, }); export default GameBoard;GameInfo.tsx:import React from react; import { View, Text, StyleSheet, Button } from react-native; interface GameInfoProps { moves: number; onReset: () void; } const GameInfo: React.FCGameInfoProps ({ moves, onReset }) { return ( View style{styles.container} View style{styles.infoRow} Text style{styles.label}步数:/Text Text style{styles.value}{moves}/Text /View Button title重新开始 onPress{onReset} color#4A90E2 / /View ); }; const styles StyleSheet.create({ container: { padding: 20, backgroundColor: #f5f5f5, alignItems: center, }, infoRow: { flexDirection: row, marginBottom: 15, }, label: { fontSize: 18, fontWeight: bold, marginRight: 10, color: #333, }, value: { fontSize: 18, color: #4A90E2, }, }); export default GameInfo;5.4 整合到主应用修改App.tsx文件引入我们的组件import React, { useState } from react; import { SafeAreaView, StyleSheet, StatusBar } from react-native; import GameBoard from ./components/GameBoard; import GameInfo from ./components/GameInfo; const App () { const [moves, setMoves] useState(0); const handleReset () { // 这里需要触发 GameBoard 重置可以通过状态提升或 Context 实现。 // 为了简化我们先假设 GameBoard 有自己的重置逻辑这里只重置步数。 setMoves(0); // 在实际整合中需要将 resetGame 函数从 GameBoard 提升到 App 或使用 ref。 }; // 注意为了简化示例步数更新逻辑已在 GameBoard 内部。更完善的架构应将 moves 状态提升到 App。 return ( SafeAreaView style{styles.container} StatusBar barStyledark-content / GameInfo moves{moves} onReset{handleReset} / GameBoard / /SafeAreaView ); }; const styles StyleSheet.create({ container: { flex: 1, backgroundColor: #F0F2F5, }, }); export default App;6. 功能测试与效果验证现在启动应用来验证我们的游戏。启动 Metro Bundler 和模拟器# 在项目根目录 npx react-native start在另一个终端窗口根据你的目标平台运行npx react-native run-ios # 或 npx react-native run-android验证核心游戏流程初始状态应用应显示一个网格状卡牌背面以及显示步数为0的信息面板。点击卡牌点击一张卡牌它应该执行一个翻转动画显示出正面的图片。匹配成功点击另一张相同图片的卡牌。如果匹配两张卡牌应保持正面朝上并且不可再点击。匹配失败点击两张不同的卡牌。它们会短暂显示正面然后自动翻转回背面。步数更新每次点击两张卡牌无论是否匹配步数计数器应增加1。游戏结束当所有卡牌都匹配成功后应弹出一个提示框显示总步数并提供“再玩一次”的选项。重新开始点击“重新开始”按钮或提示框的按钮游戏应重置所有卡牌翻回背面并重新洗牌步数归零。跨平台测试分别在 iOS 模拟器如有和 Android 模拟器上运行确保 UI 布局基本一致交互正常。7. 性能观察与优化建议React Native 应用性能通常不错但对于游戏类应用仍需注意内存与列表渲染当前我们一次性渲染所有卡牌例如16张问题不大。但如果卡牌数量巨大如100张应考虑使用FlatList或FlashList进行虚拟化渲染。动画性能我们使用了useNativeDriver: true将动画交给原生线程执行这是最佳实践能保证流畅度。图片优化确保assets/images中的图片尺寸适中过大的图片会占用内存并减慢加载速度。可以考虑使用2x,3x命名的图片来自适应不同分辨率屏幕。状态更新游戏的核心状态cards,flippedIds更新是同步的但通过setTimeout处理翻回逻辑是异步的。确保状态更新逻辑清晰避免不必要的重渲染。8. 常见问题与排查方法在开发过程中你可能会遇到以下问题问题现象可能原因排查方式解决方案应用启动白屏Metro 服务未启动、JS 包加载失败、端口冲突1. 检查 Metro 终端是否运行且无报错。2. 在设备上手动重载 (CmdR)。3. 查看 Metro 终端是否有 “Unable to resolve module” 错误。1. 确保先执行npx react-native start。2. 运行npx react-native start --reset-cache清除缓存。3. 检查依赖是否安装完整 (npm install)。run-android失败Android 环境未配置好、模拟器未启动、端口被占用1. 运行adb devices查看设备是否连接。2. 检查ANDROID_HOME环境变量。3. 查看错误信息常见于SDK location not found。1. 启动 Android 模拟器或连接真机。2. 确认环境变量配置正确并重启终端。3. 在android/local.properties文件中手动添加sdk.dir/path/to/your/sdk。run-ios失败CocoaPods 依赖未安装、Xcode 版本问题1. 进入ios目录运行pod install。2. 检查 Xcode 命令行工具是否安装 (xcode-select --install)。1. 在ios目录下执行pod install(可能需要sudo)。2. 用 Xcode 打开ios/*.xcworkspace文件尝试编译。图片无法显示图片路径错误、未使用require语法1. 检查require中的路径是否正确。2. 确认图片文件确实存在于该路径。1. 使用require(‘../assets/images/icon.png’)的静态引入方式。2. 对于网络图片使用source{{uri: ‘https://...’}}并确保有尺寸。卡牌点击无反应TouchableOpacity的onPress未正确绑定、卡牌状态逻辑阻止点击1. 检查onPress属性是否传递给了TouchableOpacity。2. 检查disabled条件逻辑 (isFlipped动画不流畅未启用原生驱动、复杂动画在 JS 线程执行检查Animated.timing配置中是否设置了useNativeDriver: true。尽可能为transform和opacity动画设置useNativeDriver: true。9. 最佳实践与扩展建议完成基础版本后可以考虑以下优化和扩展让项目更完善状态管理升级将游戏状态cards,moves,gameOver提升到App组件或使用 Context/状态管理库如 Zustand, Redux Toolkit使GameBoard和GameInfo能更好地同步。添加计时器在GameInfo中增加一个计时器记录玩家完成游戏所用的时间。难度选择提供不同网格大小如 4x4, 6x6的选项对应不同数量的卡牌对。音效与震动使用react-native-sound和react-native-haptic-feedback库在翻牌、匹配成功/失败时添加音效和触觉反馈。持久化存储使用AsyncStorage或react-native-async-storage/async-storage来保存最高分最少步数或最佳时间。UI/UX 美化引入react-native-vector-icons添加图标使用更精美的卡牌背面图案和配色方案。打包发布学习如何使用react-native命令生成发布包APK/IPA虽然上架商店需要开发者账号但可以生成测试包分享给朋友。10. 总结通过这个《记忆翻牌游戏》项目我们走通了 React Native 开发的核心链路环境搭建、项目创建、组件设计、状态管理、交互处理和动画实现。这个项目的价值在于它麻雀虽小五脏俱全覆盖了初学者必须掌握的实战技能。最值得尝试的点是亲手实现卡牌匹配的逻辑和翻转动画这是从静态页面到交互应用的关键一步。最容易踩的坑依然是环境配置和“白屏”问题按照本文的排查步骤基本能解决。下一步你可以尝试上述的扩展建议将其打磨成一个更完整的作品。也可以以此为基础探索 React Native 的其他能力如导航 (react-navigation)、网络请求、设备 API 调用等逐步构建更复杂的应用。
这次我们来看一个 React Native 的实战项目构建一款移动端的《记忆翻牌游戏》。对于想入门跨平台移动开发尤其是对游戏化应用感兴趣的前端开发者来说这是一个绝佳的练手机会。React Native 允许你用熟悉的 JavaScript 和 React 语法来开发原生体验的 iOS 和 Android 应用而《记忆翻牌》这类游戏逻辑清晰、UI交互丰富能覆盖从组件构建、状态管理到手势交互的核心技能点。本文不会空谈概念而是直接带你从零搭建一个可运行的游戏。我们会重点关注项目初始化是否顺利、如何解决常见的“启动白屏”问题、游戏核心逻辑如何实现、以及最终如何在真机或模拟器上跑起来。如果你关心 React Native 的实战入门、想了解其在国内开发环境下的注意事项或者单纯想做出一个能分享给朋友的小游戏那么这篇文章可以直接跟着操作。1. 核心能力速览在动手之前我们先快速了解这个项目能做什么以及你需要准备什么。能力项说明项目类型React Native 跨平台移动应用游戏技术栈React Native, React, JavaScript/TypeScript, Expo (可选)目标平台iOS Android核心功能记忆翻牌游戏逻辑配对、计时、计分、触控交互、游戏状态管理开发环境Node.js, Watchman (macOS), Android Studio / Xcode (用于模拟器或真机调试)硬件门槛普通开发电脑即可无需独立显卡。内存建议 8GB 以上。启动方式通过npx react-native run-ios或run-android命令启动。是否支持真机调试是可通过 USB 连接或局域网进行调试。适合场景React Native 初学者实战、移动端游戏原型开发、学习状态管理与动画。2. 适用场景与使用边界这个项目非常适合以下几类开发者React Web 开发者希望将技能扩展到移动端理解 Native 组件与布局。移动开发初学者想通过一个完整、有趣的项目入门而非枯燥的待办事项应用。寻找练手项目者需要一个逻辑完整、UI有挑战性但复杂度可控的实战案例。它能帮你解决的问题理解 React Native 项目结构从初始化到运行的全流程。掌握核心 API使用View,Text,Image,TouchableOpacity等基础组件构建界面。实践状态管理如何用 React 的useState,useEffect来管理游戏数据卡牌状态、分数、时间。实现交互与动画处理卡牌点击事件并添加翻转动画效果。完成跨平台调试学会在 iOS 模拟器和 Android 模拟器上运行应用。需要注意的边界性能极限对于极其复杂或需要高性能图形渲染的硬核游戏React Native 可能不是最优选应考虑原生开发或游戏引擎。国内网络环境初始化项目或安装依赖时可能会因网络问题导致失败需要配置镜像源。原生模块本项目为纯 JavaScript 实现不涉及原生模块Native Modules开发。如需调用摄像头等特定设备功能需额外学习。3. 环境准备与前置条件开始编码前请确保你的开发环境已就绪。这是避免后续“跑不起来”的关键一步。3.1 基础软件安装Node.js 与 npm访问 Node.js 官网下载并安装 LTS 版本。安装后在终端运行node -v和npm -v检查版本。React Native CLI这是官方命令行工具。全局安装它npm install -g react-native-cli对于 macOS 用户可能需要sudo。3.2 平台特定环境对于 Android 开发安装 Java Development Kit (JDK)需要 JDK 11。你可以通过java -version检查。安装 Android Studio这不仅是一个 IDE更重要的是它提供了 Android SDK 和模拟器。下载安装后打开 Android Studio在欢迎界面进入More Actions-SDK Manager。在SDK Platforms选项卡中勾选最新版的 Android API 级别例如 Android 13.0 “Tiramisu”。在SDK Tools选项卡中勾选 “Android SDK Build-Tools” “Android Emulator” “Android SDK Platform-Tools”。配置环境变量将 Android SDK 路径添加到系统环境变量。Windows添加ANDROID_HOME变量值为你的 SDK 路径如C:\Users\你的用户名\AppData\Local\Android\Sdk并将%ANDROID_HOME%\platform-tools和%ANDROID_HOME%\tools添加到Path。macOS/Linux在~/.zshrc或~/.bash_profile中添加export ANDROID_HOME$HOME/Library/Android/sdk export PATH$PATH:$ANDROID_HOME/emulator export PATH$PATH:$ANDROID_HOME/platform-tools export PATH$PATH:$ANDROID_HOME/tools export PATH$PATH:$ANDROID_HOME/tools/bin然后执行source ~/.zshrc。对于 iOS 开发 (仅限 macOS)安装 Xcode从 Mac App Store 安装。这是开发 iOS 应用的必需品。安装 CocoaPods这是一个 iOS 依赖管理工具在终端运行sudo gem install cocoapods3.3 解决国内网络问题重要由于某些资源位于国外国内直接访问可能很慢或失败。建议立即配置镜像源# 设置 npm 淘宝镜像 npm config set registry https://registry.npmmirror.com/ # 设置 Yarn 的镜像如果你用 Yarn yarn config set registry https://registry.npmmirror.com/对于 Android可以在android/build.gradle文件中修改仓库地址为国内镜像但这通常在项目创建后才需要处理。4. 创建项目与启动环境准备好后我们开始创建游戏项目。4.1 初始化新项目打开终端进入你希望存放项目的目录执行以下命令npx react-native init MemoryCardGame --template react-native-template-typescript这里我们使用--template react-native-template-typescript来创建一个 TypeScript 项目这有助于代码维护。如果你偏好纯 JavaScript可以去掉这个参数。这个过程会下载模板并安装所有依赖可能需要几分钟。如果卡住或报网络错误请检查你的网络和镜像源配置。4.2 首次启动与“白屏”问题排查项目创建成功后进入项目目录并尝试运行运行 iOS (macOS):cd MemoryCardGame npx react-native run-ios运行 Android:确保你的 Android 模拟器已经启动可以从 Android Studio 的 AVD Manager 启动或者安卓手机已通过 USB 连接并开启调试模式。cd MemoryCardGame npx react-native run-android首次启动常见问题——“白屏”如果应用启动后只有白色屏幕没有显示默认的欢迎文字可以按以下步骤排查检查 Metro Bundler运行run-ios或run-android后会启动一个 Metro 终端窗口。确保它没有报错并且显示Loading dependency graph, done.。重新加载在模拟器或真机上按CmdR(iOS) 或RR(Android) 手动重新加载 JS 包。检查设备连接对于 Android 真机确保电脑和手机在同一 WiFi 下或者正确配置了 USB 调试。有时需要运行adb reverse tcp:8081 tcp:8081来反向代理端口。清除缓存停止 Metro 服务 (在它的终端按CtrlC)然后删除缓存并重启npx react-native start --reset-cache然后在另一个终端重新运行run-ios或run-android。当你能看到默认的 “Welcome to React Native” 屏幕时说明基础环境已打通。5. 构建游戏核心逻辑与组件现在我们来替换默认应用实现记忆翻牌游戏。我们将创建几个核心组件Card单张卡牌、GameBoard游戏面板和GameInfo显示分数和时间的面板。5.1 准备游戏资源在项目根目录下创建一个assets文件夹里面再创建images文件夹。准备若干张成对的图片作为卡牌背面图案。例如准备 8 张不同的图片每张复制一份共 16 张用于 8 对卡牌。将它们放入assets/images。5.2 创建 Card 组件在项目根目录创建components/Card.tsximport React, { useRef, useEffect } from react; import { View, Image, TouchableOpacity, Animated, StyleSheet, Dimensions, } from react-native; interface CardProps { id: number; imageUrl: any; // 使用 require 引入的本地图片资源 isFlipped: boolean; isMatched: boolean; onPress: (id: number) void; } const Card: React.FCCardProps ({ id, imageUrl, isFlipped, isMatched, onPress }) { const flipAnimation useRef(new Animated.Value(0)).current; useEffect(() { Animated.timing(flipAnimation, { toValue: isFlipped || isMatched ? 1 : 0, duration: 300, useNativeDriver: true, }).start(); }, [isFlipped, isMatched]); const frontInterpolate flipAnimation.interpolate({ inputRange: [0, 1], outputRange: [0deg, 180deg], }); const backInterpolate flipAnimation.interpolate({ inputRange: [0, 1], outputRange: [180deg, 360deg], }); const frontAnimatedStyle { transform: [{ rotateY: frontInterpolate }], }; const backAnimatedStyle { transform: [{ rotateY: backInterpolate }], }; // 卡牌尺寸计算适应不同屏幕 const { width } Dimensions.get(window); const cardSize (width - 60) / 4; // 假设4列两边各留30边距 return ( TouchableOpacity activeOpacity{0.8} onPress{() !isFlipped !isMatched onPress(id)} disabled{isFlipped || isMatched} View style{[styles.cardContainer, { width: cardSize, height: cardSize }]} {/* 卡牌背面 */} Animated.View style{[styles.cardFace, styles.cardBack, backAnimatedStyle]} View style{styles.cardBackPattern} / /Animated.View {/* 卡牌正面图片 */} Animated.View style{[styles.cardFace, styles.cardFront, frontAnimatedStyle]} Image source{imageUrl} style{styles.cardImage} resizeModecover / /Animated.View /View /TouchableOpacity ); }; const styles StyleSheet.create({ cardContainer: { margin: 5, }, cardFace: { position: absolute, width: 100%, height: 100%, backfaceVisibility: hidden, borderRadius: 10, justifyContent: center, alignItems: center, borderWidth: 2, borderColor: #FFF, }, cardBack: { backgroundColor: #4A90E2, }, cardBackPattern: { width: 70%, height: 70%, backgroundColor: #7BAFEB, borderRadius: 5, }, cardFront: { backgroundColor: #FFF, }, cardImage: { width: 90%, height: 90%, borderRadius: 8, }, }); export default Card;5.3 创建 GameBoard 和 GameInfo 组件创建components/GameBoard.tsx和components/GameInfo.tsx。GameBoard负责渲染网格状的卡牌GameInfo显示时间、步数和分数。GameBoard.tsx (核心逻辑所在地):import React, { useState, useEffect } from react; import { View, StyleSheet, Alert } from react-native; import Card from ./Card; // 模拟卡牌数据 const initialCards [ { id: 1, image: require(../assets/images/icon1.png), matched: false }, { id: 2, image: require(../assets/images/icon1.png), matched: false }, { id: 3, image: require(../assets/images/icon2.png), matched: false }, { id: 4, image: require(../assets/images/icon2.png), matched: false }, // ... 添加更多成对的卡牌总共建议8对16张 ]; const GameBoard: React.FC () { const [cards, setCards] useState(initialCards); const [flippedIds, setFlippedIds] useStatenumber[]([]); const [moves, setMoves] useState(0); const [gameOver, setGameOver] useState(false); // 洗牌函数 const shuffleCards (array: any[]) { return [...array].sort(() Math.random() - 0.5); }; // 初始化或重置游戏 const resetGame () { const shuffledCards shuffleCards(initialCards); setCards(shuffledCards.map(card ({ ...card, matched: false }))); setFlippedIds([]); setMoves(0); setGameOver(false); }; // 处理卡牌点击 const handleCardPress (id: number) { if (flippedIds.length 2 || flippedIds.includes(id)) return; const newFlippedIds [...flippedIds, id]; setFlippedIds(newFlippedIds); setMoves(prev prev 1); if (newFlippedIds.length 2) { const [firstId, secondId] newFlippedIds; const firstCard cards.find(c c.id firstId); const secondCard cards.find(c c.id secondId); if (firstCard?.image secondCard?.image) { // 匹配成功 setCards(prevCards prevCards.map(card card.id firstId || card.id secondId ? { ...card, matched: true } : card ) ); setFlippedIds([]); } else { // 匹配失败翻回去 setTimeout(() setFlippedIds([]), 800); } } }; // 检查游戏是否结束 useEffect(() { if (cards.length 0 cards.every(card card.matched)) { setGameOver(true); Alert.alert(恭喜, 你用了 ${moves} 步完成了游戏, [ { text: 再玩一次, onPress: resetGame }, ]); } }, [cards]); // 游戏初始化 useEffect(() { resetGame(); }, []); return ( View style{styles.board} {cards.map(card ( Card key{card.id} id{card.id} imageUrl{card.image} isFlipped{flippedIds.includes(card.id) || card.matched} isMatched{card.matched} onPress{handleCardPress} / ))} /View ); }; const styles StyleSheet.create({ board: { flexDirection: row, flexWrap: wrap, justifyContent: center, padding: 15, }, }); export default GameBoard;GameInfo.tsx:import React from react; import { View, Text, StyleSheet, Button } from react-native; interface GameInfoProps { moves: number; onReset: () void; } const GameInfo: React.FCGameInfoProps ({ moves, onReset }) { return ( View style{styles.container} View style{styles.infoRow} Text style{styles.label}步数:/Text Text style{styles.value}{moves}/Text /View Button title重新开始 onPress{onReset} color#4A90E2 / /View ); }; const styles StyleSheet.create({ container: { padding: 20, backgroundColor: #f5f5f5, alignItems: center, }, infoRow: { flexDirection: row, marginBottom: 15, }, label: { fontSize: 18, fontWeight: bold, marginRight: 10, color: #333, }, value: { fontSize: 18, color: #4A90E2, }, }); export default GameInfo;5.4 整合到主应用修改App.tsx文件引入我们的组件import React, { useState } from react; import { SafeAreaView, StyleSheet, StatusBar } from react-native; import GameBoard from ./components/GameBoard; import GameInfo from ./components/GameInfo; const App () { const [moves, setMoves] useState(0); const handleReset () { // 这里需要触发 GameBoard 重置可以通过状态提升或 Context 实现。 // 为了简化我们先假设 GameBoard 有自己的重置逻辑这里只重置步数。 setMoves(0); // 在实际整合中需要将 resetGame 函数从 GameBoard 提升到 App 或使用 ref。 }; // 注意为了简化示例步数更新逻辑已在 GameBoard 内部。更完善的架构应将 moves 状态提升到 App。 return ( SafeAreaView style{styles.container} StatusBar barStyledark-content / GameInfo moves{moves} onReset{handleReset} / GameBoard / /SafeAreaView ); }; const styles StyleSheet.create({ container: { flex: 1, backgroundColor: #F0F2F5, }, }); export default App;6. 功能测试与效果验证现在启动应用来验证我们的游戏。启动 Metro Bundler 和模拟器# 在项目根目录 npx react-native start在另一个终端窗口根据你的目标平台运行npx react-native run-ios # 或 npx react-native run-android验证核心游戏流程初始状态应用应显示一个网格状卡牌背面以及显示步数为0的信息面板。点击卡牌点击一张卡牌它应该执行一个翻转动画显示出正面的图片。匹配成功点击另一张相同图片的卡牌。如果匹配两张卡牌应保持正面朝上并且不可再点击。匹配失败点击两张不同的卡牌。它们会短暂显示正面然后自动翻转回背面。步数更新每次点击两张卡牌无论是否匹配步数计数器应增加1。游戏结束当所有卡牌都匹配成功后应弹出一个提示框显示总步数并提供“再玩一次”的选项。重新开始点击“重新开始”按钮或提示框的按钮游戏应重置所有卡牌翻回背面并重新洗牌步数归零。跨平台测试分别在 iOS 模拟器如有和 Android 模拟器上运行确保 UI 布局基本一致交互正常。7. 性能观察与优化建议React Native 应用性能通常不错但对于游戏类应用仍需注意内存与列表渲染当前我们一次性渲染所有卡牌例如16张问题不大。但如果卡牌数量巨大如100张应考虑使用FlatList或FlashList进行虚拟化渲染。动画性能我们使用了useNativeDriver: true将动画交给原生线程执行这是最佳实践能保证流畅度。图片优化确保assets/images中的图片尺寸适中过大的图片会占用内存并减慢加载速度。可以考虑使用2x,3x命名的图片来自适应不同分辨率屏幕。状态更新游戏的核心状态cards,flippedIds更新是同步的但通过setTimeout处理翻回逻辑是异步的。确保状态更新逻辑清晰避免不必要的重渲染。8. 常见问题与排查方法在开发过程中你可能会遇到以下问题问题现象可能原因排查方式解决方案应用启动白屏Metro 服务未启动、JS 包加载失败、端口冲突1. 检查 Metro 终端是否运行且无报错。2. 在设备上手动重载 (CmdR)。3. 查看 Metro 终端是否有 “Unable to resolve module” 错误。1. 确保先执行npx react-native start。2. 运行npx react-native start --reset-cache清除缓存。3. 检查依赖是否安装完整 (npm install)。run-android失败Android 环境未配置好、模拟器未启动、端口被占用1. 运行adb devices查看设备是否连接。2. 检查ANDROID_HOME环境变量。3. 查看错误信息常见于SDK location not found。1. 启动 Android 模拟器或连接真机。2. 确认环境变量配置正确并重启终端。3. 在android/local.properties文件中手动添加sdk.dir/path/to/your/sdk。run-ios失败CocoaPods 依赖未安装、Xcode 版本问题1. 进入ios目录运行pod install。2. 检查 Xcode 命令行工具是否安装 (xcode-select --install)。1. 在ios目录下执行pod install(可能需要sudo)。2. 用 Xcode 打开ios/*.xcworkspace文件尝试编译。图片无法显示图片路径错误、未使用require语法1. 检查require中的路径是否正确。2. 确认图片文件确实存在于该路径。1. 使用require(‘../assets/images/icon.png’)的静态引入方式。2. 对于网络图片使用source{{uri: ‘https://...’}}并确保有尺寸。卡牌点击无反应TouchableOpacity的onPress未正确绑定、卡牌状态逻辑阻止点击1. 检查onPress属性是否传递给了TouchableOpacity。2. 检查disabled条件逻辑 (isFlipped动画不流畅未启用原生驱动、复杂动画在 JS 线程执行检查Animated.timing配置中是否设置了useNativeDriver: true。尽可能为transform和opacity动画设置useNativeDriver: true。9. 最佳实践与扩展建议完成基础版本后可以考虑以下优化和扩展让项目更完善状态管理升级将游戏状态cards,moves,gameOver提升到App组件或使用 Context/状态管理库如 Zustand, Redux Toolkit使GameBoard和GameInfo能更好地同步。添加计时器在GameInfo中增加一个计时器记录玩家完成游戏所用的时间。难度选择提供不同网格大小如 4x4, 6x6的选项对应不同数量的卡牌对。音效与震动使用react-native-sound和react-native-haptic-feedback库在翻牌、匹配成功/失败时添加音效和触觉反馈。持久化存储使用AsyncStorage或react-native-async-storage/async-storage来保存最高分最少步数或最佳时间。UI/UX 美化引入react-native-vector-icons添加图标使用更精美的卡牌背面图案和配色方案。打包发布学习如何使用react-native命令生成发布包APK/IPA虽然上架商店需要开发者账号但可以生成测试包分享给朋友。10. 总结通过这个《记忆翻牌游戏》项目我们走通了 React Native 开发的核心链路环境搭建、项目创建、组件设计、状态管理、交互处理和动画实现。这个项目的价值在于它麻雀虽小五脏俱全覆盖了初学者必须掌握的实战技能。最值得尝试的点是亲手实现卡牌匹配的逻辑和翻转动画这是从静态页面到交互应用的关键一步。最容易踩的坑依然是环境配置和“白屏”问题按照本文的排查步骤基本能解决。下一步你可以尝试上述的扩展建议将其打磨成一个更完整的作品。也可以以此为基础探索 React Native 的其他能力如导航 (react-navigation)、网络请求、设备 API 调用等逐步构建更复杂的应用。
![[光学原理与应用-521]：对光的错误理解与纠偏](http://pic.xiahunao.cn/yaotu/[光学原理与应用-521]：对光的错误理解与纠偏)
