react-native-expo-development

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Native + Expo Development with expo-mcp

基于expo-mcp的React Native + Expo开发

Overview

概述

React Native/Expo development using expo-mcp for ALL package operations and production patterns from 13k-star libraries.

Core principle: Use expo-mcp "Add package" (NOT npm install). Search docs before implementing. Apply production patterns.

Announce at start: "I'm using the react-native-expo-development skill for React Native development."

使用expo-mcp处理所有包操作，并结合拥有13k星标库的生产级模式进行React Native/Expo开发。

核心原则：使用expo-mcp的「添加包」功能（而非npm install）。在实现功能前先查阅文档。应用生产级模式。

开始时需声明："我正在使用react-native-expo-development技能进行React Native开发。"

When to Use

适用场景

Installing ANY Expo package (Phase 4)
Implementing React Native components
Implementing screens
Searching Expo/RN documentation
Working with Zustand, React Navigation, Reanimated
Following performance best practices

安装任何Expo包（第4阶段）
实现React Native组件
实现页面
查阅Expo/RN文档
使用Zustand、React Navigation、Reanimated
遵循性能最佳实践

expo-mcp Integration (MANDATORY)

expo-mcp集成（强制要求）

Package Installation (NEVER npm install)

包安装（禁止使用npm install）

❌ WRONG:

bash

npm install zustand
npm install @react-native-async-storage/async-storage

✅ CORRECT:

"Add zustand and show me how to set up a store with AsyncStorage persistence"
"Add @react-native-async-storage/async-storage"
"Add react-native-syntax-highlighter for code display"
"Add react-native-markdown-display for message rendering"

Why: expo-mcp provides:

Correct version for Expo SDK
Automatic usage documentation
Setup examples
Compatibility verification

❌ 错误示例：

bash

npm install zustand
npm install @react-native-async-storage/async-storage

✅ 正确示例：

"添加zustand并展示如何结合AsyncStorage持久化设置状态仓库"
"添加@react-native-async-storage/async-storage"
"添加react-native-syntax-highlighter用于代码展示"
"添加react-native-markdown-display用于消息渲染"

原因：expo-mcp提供以下优势：

适配Expo SDK的正确版本
自动生成使用文档
配置示例
兼容性验证

Documentation Search

文档搜索

Before implementing features:

"Search Expo docs for navigation patterns"
"Search Expo docs for AsyncStorage persistence"
"Search Expo docs for deep linking setup"

expo-mcp searches with natural language, returns relevant sections

在实现功能前：

"搜索Expo文档中的导航模式"
"搜索Expo文档中的AsyncStorage持久化方案"
"搜索Expo文档中的深度链接配置"

expo-mcp支持自然语言搜索，并返回相关文档章节

Testing Integration

测试集成

Add testID to ALL interactive elements:

typescript

<TouchableOpacity testID="send-button" onPress={handleSend}>
<TextInput testID="message-input" />
<Pressable testID="settings-button">
<FlatList testID="message-list">

Then test with expo-mcp:

"Find view with testID 'send-button' and verify it's enabled"
"Tap button with testID 'send-button'"
"Take screenshot and verify message sent"

为所有交互元素添加testID：

typescript

<TouchableOpacity testID="send-button" onPress={handleSend}>
<TextInput testID="message-input" />
<Pressable testID="settings-button">
<FlatList testID="message-list">

然后使用expo-mcp进行测试：

"查找testID为'send-button'的视图并验证其是否启用"
"点击testID为'send-button'的按钮"
"截图并验证消息已发送"

Production Patterns

生产级模式

Message UI (from react-native-gifted-chat)

消息UI（来自react-native-gifted-chat）

typescript

// MessageBubble component structure
interface MessageBubbleProps {
  message: Message;
  isUser: boolean;
}

export const MessageBubble = React.memo<MessageBubbleProps>(
  ({message, isUser}) => {
    return (
      <View testID={`message-${message.id}`} style={[
        styles.bubble,
        isUser ? styles.userBubble : styles.assistantBubble
      ]}>
        <Text testID={`message-text-${message.id}`}>{message.content}</Text>
        <Text style={styles.timestamp}>{formatTime(message.timestamp)}</Text>
      </View>
    );
  },
  (prev, next) => prev.message.id === next.message.id
);

typescript

// MessageBubble组件结构
interface MessageBubbleProps {
  message: Message;
  isUser: boolean;
}

export const MessageBubble = React.memo<MessageBubbleProps>(
  ({message, isUser}) => {
    return (
      <View testID={`message-${message.id}`} style={[
        styles.bubble,
        isUser ? styles.userBubble : styles.assistantBubble
      ]}>
        <Text testID={`message-text-${message.id}`}>{message.content}</Text>
        <Text style={styles.timestamp}>{formatTime(message.timestamp)}</Text>
      </View>
    );
  },
  (prev, next) => prev.message.id === next.message.id
);

FlatList Optimization (from Context7 docs)

FlatList优化（来自Context7文档）

typescript

<FlatList
  testID="message-list"
  data={messages}
  renderItem={renderMessage}
  keyExtractor={(item) => item.id}
  inverted={true} // For chat (newest at bottom)
  windowSize={10}
  maxToRenderPerBatch={10}
  removeClippedSubviews={true}
  initialNumToRender={10}
/>

const renderMessage = useCallback((info: ListRenderItemInfo<Message>) => (
  <MessageBubble message={info.item} isUser={info.item.role === 'user'} />
), []);

typescript

<FlatList
  testID="message-list"
  data={messages}
  renderItem={renderMessage}
  keyExtractor={(item) => item.id}
  inverted={true} // 聊天场景下最新消息在底部
  windowSize={10}
  maxToRenderPerBatch={10}
  removeClippedSubviews={true}
  initialNumToRender={10}
/>

const renderMessage = useCallback((info: ListRenderItemInfo<Message>) => (
  <MessageBubble message={info.item} isUser={info.item.role === 'user'} />
), []);

Zustand Store with AsyncStorage

结合AsyncStorage的Zustand状态仓库

typescript

import AsyncStorage from '@react-native-async-storage/async-storage';
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';

export const useAppStore = create<AppState>()(
  persist(
    (set) => ({
      settings: {...},
      updateSettings: (settings) => set({settings}),
    }),
    {
      name: 'claude-code-storage',
      storage: createJSONStorage(() => AsyncStorage),
      partialize: (state) => ({
        settings: state.settings,
        // Don't persist messages (too large)
      })
    }
  )
);

typescript

import AsyncStorage from '@react-native-async-storage/async-storage';
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';

export const useAppStore = create<AppState>()(
  persist(
    (set) => ({
      settings: {...},
      updateSettings: (settings) => set({settings}),
    }),
    {
      name: 'claude-code-storage',
      storage: createJSONStorage(() => AsyncStorage),
      partialize: (state) => ({
        settings: state.settings,
        // 不持久化消息（数据量过大）
      })
    }
  )
);

Optimistic UI (from stream-chat-react-native)

乐观UI（来自stream-chat-react-native）

typescript

const sendMessage = (text: string) => {
  const optimisticMessage = {
    id: `temp-${Date.now()}`,
    text,
    status: 'sending'
  };
  
  addMessage(optimisticMessage); // Show immediately
  
  websocket.send({type: 'message', message: text});
  // Update when confirmed
};

typescript

const sendMessage = (text: string) => {
  const optimisticMessage = {
    id: `temp-${Date.now()}`,
    text,
    status: 'sending'
  };
  
  addMessage(optimisticMessage); // 立即展示
  
  websocket.send({type: 'message', message: text});
  // 确认后更新状态
};

Component Best Practices

组件最佳实践

Structure with testID

包含testID的组件结构

typescript

interface ComponentProps {
  data: Data;
  onPress: () => void;
}

export const Component = React.memo<ComponentProps>(({data, onPress}) => {
  const handlePress = useCallback(() => {
    onPress();
  }, [onPress]);
  
  return (
    <TouchableOpacity testID="component-container" onPress={handlePress}>
      <Text testID="component-text">{data.text}</Text>
    </TouchableOpacity>
  );
});

typescript

interface ComponentProps {
  data: Data;
  onPress: () => void;
}

export const Component = React.memo<ComponentProps>(({data, onPress}) => {
  const handlePress = useCallback(() => {
    onPress();
  }, [onPress]);
  
  return (
    <TouchableOpacity testID="component-container" onPress={handlePress}>
      <Text testID="component-text">{data.text}</Text>
    </TouchableOpacity>
  );
});

Styling

样式处理

Use StyleSheet.create (NOT inline):

typescript

import {COLORS, SPACING, TYPOGRAPHY} from '../constants/theme';

const styles = StyleSheet.create({
  container: {
    padding: SPACING.base,
    backgroundColor: COLORS.backgroundGradient.start,
  },
  text: {
    fontSize: TYPOGRAPHY.fontSize.md,
    color: COLORS.textPrimary,
  },
});

使用StyleSheet.create（禁止内联样式）：

typescript

import {COLORS, SPACING, TYPOGRAPHY} from '../constants/theme';

const styles = StyleSheet.create({
  container: {
    padding: SPACING.base,
    backgroundColor: COLORS.backgroundGradient.start,
  },
  text: {
    fontSize: TYPOGRAPHY.fontSize.md,
    color: COLORS.textPrimary,
  },
});

Common Mistakes

常见误区

Mistake	Reality
"npm install works"	WRONG. expo-mcp ensures compatibility.
"I know RN already"	WRONG. Patterns prevent bugs, use them.
"Inline styles are faster"	WRONG. StyleSheet enables optimization.
"Skip testIDs"	WRONG. Required for expo-mcp testing.

误区	实际情况
"npm install也能用"	错误。expo-mcp可确保兼容性。
"我已经懂RN了"	错误。这些模式可避免bug，必须使用。
"内联样式更快"	错误。StyleSheet可启用优化。
"可以跳过testID"	错误。这是expo-mcp测试的必要条件。

Red Flags

注意信号

"npm install is fine" → WRONG. Use expo-mcp.
"Don't need patterns" → WRONG. 13k stars prove value.
"testID is optional" → WRONG. Required for autonomous testing.

"npm install没问题" → 错误。请使用expo-mcp。
"不需要使用这些模式" → 错误。13k星标证明其价值。
"testID是可选的" → 错误。这是自动化测试的必要条件。

Integration

集成说明

Use WITH:
```
@claude-mobile-metro-manager
```
(Metro required)
Use FOR: All Phase 4 implementation
Enables: expo-mcp autonomous testing in Gate 4A

搭配使用：
```
@claude-mobile-metro-manager
```
（必须使用Metro）
适用阶段：所有第4阶段的实现工作
功能支持：在Gate 4A中启用expo-mcp自动化测试