Published on

从零开发一个app到发布

Authors

开发和上线一个 React Native（RN）应用到 Apple App Store 涉及多个步骤，从项目的创建到打包、发布。以下是从 开发到上线 的详细流程和所需的工具、资源：

1. 环境搭建

在开始开发之前，确保你的开发环境已经设置好。需要具备以下工具：

  • Node.js: React Native 的依赖项，需要安装 Node.js 和 npm/yarn。
  • React Native CLI: 安装 React Native CLI 工具，或使用 expo-cli （如果你使用 Expo 开发的话）。
    npm install -g react-native-cli
  • Xcode: 用于开发 iOS 应用的工具，包含编译器、模拟器等，必需的开发工具。
    • 下载和安装：Xcode 在 Mac App Store
    • 安装时，记得安装 Xcode 命令行工具（xcode-select --install）。
  • CocoaPods: 用于 iOS 项目的依赖管理工具。
    sudo gem install cocoapods

2. 创建 React Native 项目

使用 React Native CLI 或 Expo 来创建一个新的项目。

使用 React Native CLI 创建项目：

npx react-native init MyApp

使用 Expo CLI 创建项目（如果你选择使用 Expo）：

npm install -g expo-cli
expo init MyApp
cd MyApp
expo start

3. 编写代码

  • 开发你的 React Native 应用，设计用户界面和功能。
  • React Native 项目结构包括：
    • App.js: 主要的组件文件，包含应用的根组件。
    • ios/: iOS 原生部分的代码和配置文件。
    • android/: Android 原生部分的代码和配置文件。

使用 React Native 的组件库、第三方库来加速开发。

4. 测试和调试

  • 在 iOS 上测试应用：

    • 使用 Xcode 提供的 iOS 模拟器来运行和调试你的应用。
    • 或者，连接真实的 iOS 设备来进行调试。
    npx react-native run-ios

  • 调试工具：React Native 提供了 React DevTools 和 Chrome DevTools，帮助你调试 JavaScript 代码。

    • react-devtools：调试 React 组件。
    • Chrome 调试：在 Chrome 中调试 JavaScript 代码，打开 http://localhost:8081/debugger-ui。

5. 配置 iOS 部分

  • App Icons：在 iOS 项目中，配置应用的图标和启动画面（Launch Screen）。
    • 打开 ios/MyApp/Images.xcassets/AppIcon.appiconset/ 目录，并根据 Xcode 提供的要求添加各种尺寸的图标。
  • 权限配置：根据需要，配置应用的权限（例如：相机、麦克风、位置等）。这些配置文件通常在 Info.plist 文件中进行修改。

6. 编译和打包 iOS 应用

  1. 在 Xcode 中配置 iOS 项目：
    • 打开 ios/MyApp.xcworkspace 文件（不要打开 .xcodeproj 文件，确保支持 CocoaPods）。
    • 在 Xcode 中配置应用的 Bundle Identifier 和 版本号，这些信息会在 App Store 上显示。
    • 配置应用的 签名证书 和 Provisioning Profile。需要一个有效的 Apple 开发者账号。
      • Apple Developer 账号：你需要一个有效的 Apple Developer 账户，才能提交应用到 App Store。你可以访问 Apple Developer 网站注册。
  2. 生成 iOS 构建：
    • 在 Xcode 中，选择你要发布的设备（例如模拟器或真实设备）。
    • 在菜单中选择 Product > Archive，生成构建文件。
    • Xcode 会将你的应用打包并生成一个可供上传到 App Store 的 .ipa 文件。

7. 创建 Apple Developer 账户

  • 需要注册 Apple Developer 账号（收费年费为 99 美元），才能上传应用到 App Store。注册过程可以通过 Apple Developer 完成。

8. 发布应用到 App Store

  1. 创建 App Store 连接（App Store Connect）账号：

    • 访问 App Store Connect，并使用 Apple Developer 账号登录。
    • 在 App Store Connect 中创建一个新的应用记录（包括应用名称、描述、屏幕截图、隐私政策等）。

  2. 上传应用：

    • 在 Xcode 中，选择 Product > Archive，然后在 Xcode 的 Organizer 窗口中选择你刚才生成的构建。
    • 点击 Distribute App，然后选择 App Store Connect，按照提示上传应用。
    • 确保你的应用满足 Apple 的审核要求（包括合规性、内容、性能等）。

  3. 填写应用详情：

    • 在 App Store Connect 中，填写应用的 描述、关键词、截图、版本号等信息。
    • 选择要发布的 国家/地区。
    • 提交应用进行审核。

  4. 等待审核：

    • Apple 会审核你的应用，通常需要几天的时间。审核通过后，你的应用将出现在 App Store 中。
    • 如果审核不通过，你会收到反馈，修复问题后重新提交。

9. 维护和更新应用

  • 应用发布后，及时监控其表现（通过 App Store Connect 中的分析工具）。
  • 根据用户反馈和 bug 修复需求发布新的版本。
  • 每次发布新版本时，都需要在 Xcode 中更新版本号和构建号。

小结

  1. 开发环境：
    • Node.js、React Native CLI、Xcode、CocoaPods。
  2. 开发流程：
    • 创建项目、编写代码、测试和调试（使用模拟器或真实设备）。
  3. iOS 配置：
    • 配置图标、启动画面、权限和签名证书。
  4. 打包和发布：
    • 使用 Xcode 打包应用，上传到 App Store Connect，提交审核。
  5. Apple Developer 账号：
    • 注册并支付年费，确保应用能上传到 App Store。
  6. 审核与发布：
    • Apple 审核通过后，应用正式上线。

这些是从 React Native 开发到上线 的基本步骤，确保你拥有 Apple Developer 账号并按照规定进行开发、测试和发布。