react-native-mobile-development
使用 Expo 构建 React Native 移动应用
开发移动应用需要平台特定知识和命令行工具。本技能为 React Native 和 Expo 开发提供可直接使用的模板、最佳实践和故障排查指南。
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "react-native-mobile-development". Create a button component with a title and press handler
Résultat attendu:
- • Use TouchableOpacity for the interactive button element
- • Style with padding: 16, background color: #007AFF, border radius: 8
- • Display title text in white, font size 16, font weight: 600
- • Export as functional component accepting title and onPress props
- • Add accessibilityLabel for screen reader support
Utilisation de "react-native-mobile-development". Set up a new Expo project for iOS and Android
Résultat attendu:
- • Use npx create-expo-app to scaffold the project
- • Install dependencies with npx expo install for compatibility
- • Configure app.json with name, slug, and platform settings
- • Run npx expo start to launch the development server
- • Use npx expo run:ios or npx expo run:android for native builds
Utilisation de "react-native-mobile-development". Fix Metro bundler not starting
Résultat attendu:
- • Clear cache with npx expo start --clear
- • Check that port 8081 is not in use by another process
- • Reset the simulator or emulator if device connection fails
- • Verify Metro is not already running in another terminal
- • Review console logs for module resolution errors
Audit de sécurité
SûrDocumentation-only skill for React Native development. Contains no executable code, scripts, or file system operations. Static findings are false positives from markdown documentation elements (color codes, bash examples, external links) that the scanner misidentified as security risks.
Facteurs de risque
🌐 Accès réseau (3)
📁 Accès au système de fichiers (1)
Score de qualité
Ce que vous pouvez construire
组件模板
获取按钮、列表、表单等 React Native 组件的代码模板，并包含正确的样式模式。
平台适配
学习编写条件代码，以适配 iOS 与 Android 平台之间的行为和样式差异。
构建故障排查
使用已验证的解决方案处理常见的 Metro 打包器、原生模块和构建失败问题。
Essayez ces prompts
Create a React Native component with TouchableOpacity that shows a text label. Use StyleSheet.create for styling with padding, background color, and border radius.
Write platform-specific styles using Platform.select for iOS shadow and Android elevation. Also show conditional rendering based on Platform.OS.
Create a FlatList component that renders items from an array. Include keyExtractor and proper spacing between items.
Create a TextInput component with useState for value management. Include placeholder, onChangeText handler, and input styling.
Bonnes pratiques
- 使用 StyleSheet.create() 创建所有样式而不是内联对象，以提升性能
- 为可交互元素添加 accessibilityLabel 和 accessibilityRole 以支持屏幕阅读器
- 在多种屏幕尺寸以及 iOS 和 Android 平台上测试组件
Éviter
- 避免内联样式对象 - 它们会在每次渲染时创建新的样式对象
- 不要跳过可交互元素的无障碍标签
- 避免在业务逻辑中使用 Platform.OS === 'ios' 判断 - 提取到自定义 hooks