🇨🇳中文介绍

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 配置
• 模拟器问题：重置模拟器

资源

• React Native 文档
• Expo 文档

每周安装次数

–

代码仓库

babakbar/vibekeeper

首次出现

–

安全审计

Gen Agent Trust HubPassSocketPassSnykPass

# Development
npm start               # Start Metro bundler
npm run ios            # Run on iOS Simulator
npm run android        # Run on Android Emulator

# Expo specific
npx expo start         # Start with Expo CLI
npx expo install PKG   # Install compatible packages
npx expo prebuild      # Generate native code

// Mobile component template
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',
  },
});