第21章：React Native简介

构建跨平台应用的基本流程

1. 环境准备与工具安装

• Node.js与npm/yarn
  确保安装最新稳定版的Node.js（建议LTS版本），并配置npm或yarn作为包管理工具。
• React Native CLI或Expo
  选择开发方式：
  • React Native CLI：适合需要原生模块集成的复杂项目。
  • Expo：简化开发流程，内置常用组件和API，适合快速原型开发。
• 开发环境配置
  • Android开发需安装Android Studio和JDK。
  • iOS开发需Xcode（仅限macOS）。

2. 初始化项目

# 使用React Native CLI
npx react-native init MyProject

# 使用Expo
npx create-expo-app MyProject

3. 项目结构与核心文件

• 入口文件：index.js（React Native CLI）或App.js（Expo）。
• 平台特定代码：
  • Android：android/目录（Java/Kotlin原生代码）。
  • iOS：ios/目录（Objective-C/Swift原生代码）。
• 组件与逻辑：通常按功能模块组织在src/目录下。

4. 开发与调试

• 启动开发服务器：

  npm start  # 或 yarn start
  
• 运行应用：
  • Android：npx react-native run-android。
  • iOS：npx react-native run-ios（需macOS）。
• 调试工具：
  • React Native Debugger：集成Redux和React DevTools。
  • Expo DevTools：实时预览和热重载。

5. 跨平台适配策略

• 平台特定代码：
  • 使用.android.js和.ios.js后缀区分平台组件。
  • 通过Platform模块动态判断平台：

    import { Platform } from 'react-native';
    const styles = Platform.select({
      ios: { padding: 20 },
      android: { padding: 10 }
    });
    
• 第三方库选择：优先使用支持双平台的库（如react-navigation）。

6. 构建与发布

• Android：
  • 生成签名密钥，配置android/app/build.gradle。
  • 运行./gradlew assembleRelease生成APK。
• iOS：
  • 通过Xcode配置证书和描述文件。
  • 使用Archive功能生成IPA文件。
• Expo：直接通过expo publish发布或expo build生成二进制文件。

7. 持续集成（CI/CD）

• 常用工具：
  • Fastlane：自动化构建和发布流程。
  • GitHub Actions/CircleCI：集成测试和部署。
• 示例流程：
  1. 代码提交触发CI。
  2. 运行单元测试和端到端测试。
  3. 自动构建分发包（如TestFlight或Firebase App Distribution）。

8. 性能优化与测试

• 性能分析：
  • 使用React Native Performance Monitor。
  • 避免频繁渲染：React.memo和useMemo。
• 跨平台测试：
  • 工具：Detox（端到端测试）、Jest（单元测试）。
  • 真机测试覆盖不同设备和OS版本。

通过以上流程，开发者可以高效构建和维护跨平台的React Native应用，兼顾开发效率与原生性能。