React Native Expert

作者 jeffallan1be15d8064f8MIT11K 个星标收录于 2026年10月8日更新于 2026年10月8日仓库5天前更新

Builds, optimizes, and debugs cross-platform mobile applications with React Native and Expo. Implements navigation hierarchies (tabs, stacks, drawers), configures native modules, optimizes FlatList rendering with memo and useCallback, and handles platform-specific code for iOS and Android. Use when building a React Native or Expo mobile app, setting up navigation, integrating native modules, improving scroll performance, handling SafeArea or keyboard input, or configuring Expo SDK projects.

仅含说明Software Development

AI 生成的概览

指导构建、优化和调试 React Native 与 Expo 移动应用，涵盖导航、原生模块和列表性能。

功能: 提供面向 React Native 与 Expo 项目的高级移动工程师工作流程：使用 Expo Router 或 React Navigation 进行搭建、基于功能的项目结构、带平台处理的实现、性能优化以及跨平台测试。它提供关于导航、平台代码、FlatList 优化、存储钩子和项目结构的参考指导，并附有优化列表、键盘适配表单和平台特定组件的 TypeScript 代码示例。它还涵盖 Metro、iOS 与 Android 构建失败以及原生模块问题的错误恢复。
适用场景: 适用于构建 React Native 或 Expo 移动应用、搭建导航层级、集成原生模块、改善滚动或列表性能，或处理 SafeArea、键盘输入以及 iOS 和 Android 平台特定代码的场景。
运行要求: 仅为指令，不附带脚本。假定已有 React Native 0.73+ / Expo SDK 50+ 项目，并具备 Node 与 npm/npx、Expo CLI、用于原生构建的 Xcode 和 Android SDK 工具，以及用于测试的模拟器。

React Native Expert

Senior mobile engineer building production-ready cross-platform applications with React Native and Expo.

Core Workflow

Setup — Expo Router or React Navigation, TypeScript config → run npx expo doctor to verify environment and SDK compatibility; fix any reported issues before proceeding
Structure — Feature-based organization
Implement — Components with platform handling → verify on iOS simulator and Android emulator; check Metro bundler output for errors before moving on
Optimize — FlatList, images, memory → profile with Flipper or React DevTools
Test — Both platforms, real devices

Error Recovery

Metro bundler errors → clear cache with npx expo start --clear, then restart
iOS build fails → check Xcode logs → resolve native dependency or provisioning issue → rebuild with npx expo run:ios
Android build fails → check adb logcat or Gradle output → resolve SDK/NDK version mismatch → rebuild with npx expo run:android
Native module not found → run npx expo install <module> to ensure compatible version, then rebuild native layers

Reference Guide

Load detailed guidance based on context:

Topic	Reference	Load When
Navigation	`references/expo-router.md`	Expo Router, tabs, stacks, deep linking
Platform	`references/platform-handling.md`	iOS/Android code, SafeArea, keyboard
Lists	`references/list-optimization.md`	FlatList, performance, memo
Storage	`references/storage-hooks.md`	AsyncStorage, MMKV, persistence
Structure	`references/project-structure.md`	Project setup, architecture

Constraints

MUST DO

Use FlatList/SectionList for lists (not ScrollView)
Implement memo + useCallback for list items
Handle SafeAreaView for notches
Test on both iOS and Android real devices
Use KeyboardAvoidingView for forms
Handle Android back button in navigation

MUST NOT DO

Use ScrollView for large lists
Use inline styles extensively (creates new objects)
Hardcode dimensions (use Dimensions API or flex)
Ignore memory leaks from subscriptions
Skip platform-specific testing
Use waitFor/setTimeout for animations (use Reanimated)

Code Examples

Optimized FlatList with memo + useCallback

tsx

import React, { memo, useCallback } from 'react';import { FlatList, View, Text, StyleSheet } from 'react-native';
type Item = { id: string; title: string };
const ListItem = memo(({ title, onPress }: { title: string; onPress: () => void }) => (  <View style={styles.item}>    <Text onPress={onPress}>{title}</Text>  </View>));
export function ItemList({ data }: { data: Item[] }) {  const handlePress = useCallback((id: string) => {    console.log('pressed', id);  }, []);
  const renderItem = useCallback(    ({ item }: { item: Item }) => (      <ListItem title={item.title} onPress={() => handlePress(item.id)} />    ),    [handlePress]  );
  return (    <FlatList      data={data}      keyExtractor={(item) => item.id}      renderItem={renderItem}      removeClippedSubviews      maxToRenderPerBatch={10}      windowSize={5}    />  );}
const styles = StyleSheet.create({  item: { padding: 16, borderBottomWidth: StyleSheet.hairlineWidth },});

KeyboardAvoidingView Form

tsx

import React from 'react';import {  KeyboardAvoidingView,  Platform,  ScrollView,  TextInput,  StyleSheet,  SafeAreaView,} from 'react-native';
export function LoginForm() {  return (    <SafeAreaView style={styles.safe}>      <KeyboardAvoidingView        style={styles.flex}        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}      >        <ScrollView contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled">          <TextInput style={styles.input} placeholder="Email" autoCapitalize="none" />          <TextInput style={styles.input} placeholder="Password" secureTextEntry />        </ScrollView>      </KeyboardAvoidingView>    </SafeAreaView>  );}
const styles = StyleSheet.create({  safe: { flex: 1 },  flex: { flex: 1 },  content: { padding: 16, gap: 12 },  input: { borderWidth: 1, borderRadius: 8, padding: 12, fontSize: 16 },});

Platform-Specific Component

tsx

import { Platform, StyleSheet, View, Text } from 'react-native';
export function StatusChip({ label }: { label: string }) {  return (    <View style={styles.chip}>      <Text style={styles.label}>{label}</Text>    </View>  );}
const styles = StyleSheet.create({  chip: {    paddingHorizontal: 12,    paddingVertical: 4,    borderRadius: 999,    backgroundColor: '#0a7ea4',    // Platform-specific shadow    ...Platform.select({      ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 4 },      android: { elevation: 3 },    }),  },  label: { color: '#fff', fontSize: 13, fontWeight: '600' },});

Output Format

When implementing React Native features, deliver:

Component code — TypeScript, with prop types defined
Platform handling — Platform.select or .ios.tsx / .android.tsx splits as needed
Navigation integration — route params typed, back-button handling included
Performance notes — memo boundaries, key extractor strategy, image caching

Knowledge Reference

React Native 0.73+, Expo SDK 50+, Expo Router, React Navigation 7, Reanimated 3, Gesture Handler, AsyncStorage, MMKV, React Query, Zustand

Maintained by @jeffallan, Principal Consultant at Synergetic Solutions

来源与署名

来源：jeffallan/claude-skills位于skills/react-native-expert提交1be15d8

许可证： MIT

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 jeffallan/claude-skills 的技能

Wordpress Pro

jeffallan

指导 WordPress 主题、插件、Gutenberg 区块与 WooCommerce 开发，并涵盖安全与性能实践。

Software Development11K5天前更新

Vue Expert Js

jeffallan

仅用 JavaScript 构建 Vue 3 应用，以 JSDoc 注解替代 TypeScript。

Software Development11K5天前更新

The Fool

jeffallan

用五种结构化批判性推理模式，对想法、计划和决策进行压力测试。

Research & Analysis11K5天前更新

Swift Expert

jeffallan

指导 Swift 5.9+ 的 Apple 平台开发，涵盖 SwiftUI、async/await、actor、协议与测试。

Software Development11K5天前更新

Sql Pro

jeffallan

指导 SQL 查询优化、数据库架构设计以及跨主流方言的性能问题排查。

Data & Analytics11K5天前更新

Spring Boot Engineer

jeffallan

指导 Spring Boot 3.x 后端实现：REST 控制器、JPA 数据访问、Security 6、WebFlux 与测试。

Software Development11K5天前更新

更多Software Development技能

Playground

anthropics

构建自包含的交互式 HTML 演练场，包含控件、实时预览和可复制的提示词输出。

Software Development37K今天更新

M5 Onboard

anthropics

通过 USB 检测 M5Stack ESP32 开发板，刷写 UIFlow 2.0 固件并安装 MicroPython 应用包。

Software Development37K今天更新

Cardputer Buddy

anthropics

指导迭代 Cardputer-Adv 的 MicroPython 应用包：添加应用、通过 USB 串口推送文件、查看日志并运行 REPL 命令。

Software Development37K今天更新

Testing Strategy

anthropics

设计测试策略与测试计划，涵盖测试类型、覆盖率目标与示例测试用例。

Software Development27K今天更新

Tech Debt

anthropics

识别、分类并排序技术债务，产出评分后的待办清单与分阶段整改计划。

Software Development27K今天更新

System Design

anthropics

通过需求、高层设计、深入设计、扩展与权衡分析来指导系统与架构设计。

Software Development27K今天更新

import React, { memo, useCallback } from 'react';import { FlatList, View, Text, StyleSheet } from 'react-native';
type Item = { id: string; title: string };
const ListItem = memo(({ title, onPress }: { title: string; onPress: () => void }) => (  <View style={styles.item}>    <Text onPress={onPress}>{title}</Text>  </View>));
export function ItemList({ data }: { data: Item[] }) {  const handlePress = useCallback((id: string) => {    console.log('pressed', id);  }, []);
  const renderItem = useCallback(    ({ item }: { item: Item }) => (      <ListItem title={item.title} onPress={() => handlePress(item.id)} />    ),    [handlePress]  );
  return (    <FlatList      data={data}      keyExtractor={(item) => item.id}      renderItem={renderItem}      removeClippedSubviews      maxToRenderPerBatch={10}      windowSize={5}    />  );}
const styles = StyleSheet.create({  item: { padding: 16, borderBottomWidth: StyleSheet.hairlineWidth },});

import React from 'react';import {  KeyboardAvoidingView,  Platform,  ScrollView,  TextInput,  StyleSheet,  SafeAreaView,} from 'react-native';
export function LoginForm() {  return (    <SafeAreaView style={styles.safe}>      <KeyboardAvoidingView        style={styles.flex}        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}      >        <ScrollView contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled">          <TextInput style={styles.input} placeholder="Email" autoCapitalize="none" />          <TextInput style={styles.input} placeholder="Password" secureTextEntry />        </ScrollView>      </KeyboardAvoidingView>    </SafeAreaView>  );}
const styles = StyleSheet.create({  safe: { flex: 1 },  flex: { flex: 1 },  content: { padding: 16, gap: 12 },  input: { borderWidth: 1, borderRadius: 8, padding: 12, fontSize: 16 },});

import { Platform, StyleSheet, View, Text } from 'react-native';
export function StatusChip({ label }: { label: string }) {  return (    <View style={styles.chip}>      <Text style={styles.label}>{label}</Text>    </View>  );}
const styles = StyleSheet.create({  chip: {    paddingHorizontal: 12,    paddingVertical: 4,    borderRadius: 999,    backgroundColor: '#0a7ea4',    // Platform-specific shadow    ...Platform.select({      ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 4 },      android: { elevation: 3 },    }),  },  label: { color: '#fff', fontSize: 13, fontWeight: '600' },});