名称: React Native 开发 描述: 深度集成 React Native 生态系统，用于跨平台移动开发 版本: 1.0.0 类别: 跨平台开发 标识: react-native-dev 状态: 活跃
React Native 开发技能
概述
此技能提供与 React Native 生态系统的深度集成，用于跨平台移动开发。它支持执行 React Native CLI 命令、组件生成、构建优化以及全面的调试功能。
允许使用的工具
bash- 执行 React Native CLI、Expo CLI 和 npm/yarn 命令read- 分析 React Native 项目文件、配置和组件write- 生成和修改 React Native 组件及配置edit- 更新现有的 React Native 代码和配置glob- 搜索 React Native 组件和配置文件grep- 在 React Native 代码库中搜索模式
核心能力
核心开发
-
React Native CLI 操作
- 初始化新的 React Native 项目
- 使用自定义配置运行 Metro 打包器
- 执行特定平台构建（iOS/Android）
- 链接原生依赖项
- 生成原生代码桥接
-
Expo CLI 操作
- 创建和管理 Expo 项目
- 配置 EAS Build 和 EAS Submit
- 管理 Expo 配置插件
- 处理空中更新
- 为裸工作流退出进行预构建
-
组件生成
- 生成基于 TypeScript 的函数式组件
- 创建具有正确类型的自定义钩子
- 实现 React Navigation 屏幕和导航器
- 构建可复用的 UI 组件库
- 为组件生成 Storybook 故事
状态管理
-
Redux Toolkit 集成
- 使用 createSlice 生成 Redux 切片
- 为 API 缓存配置 RTK Query
- 实现具有正确类型的异步 thunks
- 设置 Redux DevTools 集成
- 使用 createSelector 创建选择器
-
Zustand/Jotai/Recoil
- 配置轻量级状态存储
- 实现原子状态模式
- 设置持久化中间件
- 创建派生状态计算
导航
- React Navigation
- 配置堆栈、标签页和抽屉导航器
- 使用 TypeScript 实现类型安全的导航
- 设置深度链接配置
- 处理身份验证流程
- 实现嵌套导航模式
性能
-
性能优化
- 配置 Hermes JavaScript 引擎
- 实现 FlatList/FlashList 优化
- 设置 React Native Performance 监控
- 分析和修复重新渲染问题
- 实现懒加载和代码分割
-
原生模块集成
- 配置 TurboModules 和 JSI
- 桥接原生代码（Objective-C/Swift/Java/Kotlin）
- 为原生模块设置 Codegen
- 调试原生崩溃和问题
测试
- 测试配置
- 使用 React Native 预设配置 Jest
- 设置 React Native Testing Library
- 实现组件快照测试
- 为 E2E 测试配置 Detox
- 有效模拟原生模块
调试
- 调试工具
- 配置 Flipper 插件
- 设置 Reactotron 集成
- 使用 React DevTools 进行组件检查
- 调试网络请求
- 分析 JavaScript 性能
目标流程
此技能与以下流程集成：
react-native-app-setup.js- 项目初始化和配置cross-platform-ui-library.js- 共享组件开发mobile-testing-strategy.js- 测试实施和覆盖率mobile-performance-optimization.js- 性能调优
依赖项
必需
- Node.js 18+
- npm 或 yarn 包管理器
- React Native CLI (
npx react-native) - Watchman (macOS)
可选
- Expo CLI (
npx expo) - 带有 Android SDK 的 Android Studio
- Xcode (仅限 macOS)
- Flipper
- Reactotron
配置
项目结构
项目根目录/
├── src/
│ ├── components/ 组件
│ ├── screens/ 屏幕
│ ├── navigation/ 导航
│ ├── store/ 状态管理
│ ├── hooks/ 钩子
│ ├── services/ 服务
│ ├── utils/ 工具
│ └── types/ 类型
├── __tests__/ 测试
├── android/ Android
├── ios/ iOS
├── metro.config.js
├── babel.config.js
├── tsconfig.json
└── package.json
Metro 配置
// metro.config.js
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const config = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
};
module.exports = mergeConfig(getDefaultConfig(__dirname), config);
使用示例
初始化项目
# 创建新的 React Native 项目
npx react-native init MyApp --template react-native-template-typescript
# 或使用 Expo
npx create-expo-app MyApp --template expo-template-blank-typescript
生成组件
// src/components/Button/Button.tsx
import React from 'react';
import { TouchableOpacity, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
interface ButtonProps {
title: string;
onPress: () => void;
variant?: 'primary' | 'secondary';
disabled?: boolean;
}
export const Button: React.FC<ButtonProps> = ({
title,
onPress,
variant = 'primary',
disabled = false,
}) => {
return (
<TouchableOpacity
style={[styles.button, styles[variant], disabled && styles.disabled]}
onPress={onPress}
disabled={disabled}
activeOpacity={0.8}
>
<Text style={[styles.text, styles[`${variant}Text`]]}>{title}</Text>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
button: {
paddingVertical: 12,
paddingHorizontal: 24,
borderRadius: 8,
alignItems: 'center',
},
primary: {
backgroundColor: '#007AFF',
},
secondary: {
backgroundColor: 'transparent',
borderWidth: 1,
borderColor: '#007AFF',
},
disabled: {
opacity: 0.5,
},
text: {
fontSize: 16,
fontWeight: '600',
},
primaryText: {
color: '#FFFFFF',
},
secondaryText: {
color: '#007AFF',
},
});
配置导航
// src/navigation/RootNavigator.tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { HomeScreen } from '../screens/HomeScreen';
import { DetailsScreen } from '../screens/DetailsScreen';
export type RootStackParamList = {
Home: undefined;
Details: { id: string };
};
const Stack = createNativeStackNavigator<RootStackParamList>();
export const RootNavigator: React.FC = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
配置 Redux Store
// src/store/store.ts
import { configureStore } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query';
import { api } from './api';
import userReducer from './slices/userSlice';
export const store = configureStore({
reducer: {
user: userReducer,
[api.reducerPath]: api.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(api.middleware),
});
setupListeners(store.dispatch);
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
质量门限
代码质量
- 启用 TypeScript 严格模式
- 使用 React Native 配置的 ESLint
- 使用 Prettier 进行代码格式化
- 生产代码中不使用 any 类型
性能基准
- 应用启动时间 < 2 秒
- 滚动时保持 60fps
- 内存使用在平台限制内
- 通过摇树优化打包大小
测试覆盖率
- 单元测试覆盖率 > 80%
- 组件测试覆盖率 > 70%
- 覆盖 E2E 关键路径
错误处理
常见问题
-
Metro 打包器缓存问题
npx react-native start --reset-cache -
iOS pod 安装失败
cd ios && pod install --repo-update -
Android Gradle 同步问题
cd android && ./gradlew clean -
原生模块链接问题
npx react-native link # 或对于较新版本，使用自动链接
相关技能
flutter-dart- 替代的跨平台框架mobile-testing- 全面的测试框架mobile-perf- 性能分析和优化push-notifications- 推送通知实现
版本历史
- 1.0.0 - 具有核心 React Native 功能的初始版本