⚡

ReactNative移动开发 react-native-mobile-development

React Native 移动开发技能指南，提供使用 React Native 和 Expo 框架构建跨平台 iOS 和 Android 移动应用的完整工作流程。涵盖项目初始化、组件开发、平台适配、性能优化、调试部署等核心知识，适用于前端开发者和移动应用工程师快速上手混合应用开发。

移动开发 0 次安装 0 次浏览 更新于 3/2/2026

名称: react-native-mobile-development 描述: 构建和管理 React Native/Expo 移动应用，包括项目设置、开发工作流程和平台特定指导。适用于移动应用开发、配置或运行应用时使用。 允许工具: Bash, Read, Write, Edit, Grep, Glob

React Native 移动开发

使用 React Native 和 Expo 构建移动应用的指南。

何时使用

  • 设置 React Native/Expo 项目
  • 运行开发服务器或构建
  • 创建移动组件
  • 处理平台特定代码（iOS/Android）
  • 配置 app.json 或原生模块
  • 排查移动端特定问题

核心命令

# 开发
npm start               # 启动 Metro 打包器
npm run ios            # 在 iOS 模拟器上运行
npm run android        # 在 Android 模拟器上运行

# Expo 特定
npx expo start         # 使用 Expo CLI 启动
npx expo install PKG   # 安装兼容包
npx expo prebuild      # 生成原生代码

组件结构

// 移动组件模板
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

interface Props {
  title: string;
  onPress: () => void;
}

export function MyComponent({ title, onPress }: Props) {
  return (
    <TouchableOpacity onPress={onPress} style={styles.container}>
      <Text style={styles.text}>{title}</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
    backgroundColor: '#007AFF',
    borderRadius: 8,
  },
  text: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600',
  },
});

平台特定代码

import { Platform } from 'react-native';

// 条件渲染
{Platform.OS === 'ios' && <IOSComponent />}
{Platform.OS === 'android' && <AndroidComponent />}

// 平台特定值
const height = Platform.select({
  ios: 44,
  android: 56,
  default: 50,
});

// 平台特定样式
const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      ios: { shadowColor: '#000', shadowOpacity: 0.3 },
      android: { elevation: 4 },
    }),
  },
});

最佳实践

  1. 性能：使用 StyleSheet.create()，避免内联样式，优化图片
  2. 无障碍：添加 accessibilityLabel 和 accessibilityRole
  3. 响应式：在不同屏幕尺寸上测试
  4. 导航：使用 React Navigation 或 Expo Router
  5. 状态：保持组件状态最小化，使用 context/store 处理共享状态

常见模式

列表

import { FlatList } from 'react-native';

<FlatList
  data={items}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <ItemComponent item={item} />}
/>

表单

import { TextInput } from 'react-native';
const [value, setValue] = useState('');

<TextInput
  value={value}
  onChangeText={setValue}
  placeholder="输入文本"
  style={styles.input}
/>

加载状态

import { ActivityIndicator } from 'react-native';

{loading ? <ActivityIndicator /> : <Content />}

故障排除

  • Metro 无法启动：使用 npx expo start --clear 清除缓存
  • 原生模块错误：运行 npx expo prebuild --clean
  • 构建失败：检查 app.json 配置
  • 模拟器问题：重置模拟器或仿真器

资源