React Native 入门指南

React Native 移动端选项适用于 团队版 或更高级别的许可证

ABP 平台提供了基础的 React Native 启动模板，用于开发与您基于 ABP 的后端集成的移动应用程序。

如何准备开发环境

请按照以下步骤为 React Native 准备开发环境。

安装 Node.js： 请访问 Node.js 下载页面并为您的操作系统下载合适的 Node.js v20.11+ 安装程序。另一种选择是安装 NVM 并使用它在您的操作系统中管理多个 Node.js 版本。
【可选】安装 Yarn： 您可以按照安装页面的说明安装 Yarn v1（非 v2）。与 npm v6 及更低版本相比，Yarn v1 可以提供更好的开发体验。您可以跳过此步骤，转而使用 Node.js 内置的 npm。
【可选】安装 VS Code： VS Code 是一个免费的、开源的 IDE，与 TypeScript 无缝协作。虽然您可以使用包括 Visual Studio 或 Rider 在内的任何 IDE，但在处理 React Native 项目时，VS Code 很可能会提供最佳的开发体验。
安装模拟器/仿真器： React Native 应用程序需要在您的操作系统上通过 Android 仿真器或 iOS 模拟器来运行。如果您的系统上未安装和配置 Android Studio，我们建议在不安装 Android Studio 的情况下设置 Android 仿真器。

如果您偏好其他方式，可以查看 expo.io 文档上的 Android Studio 仿真器或 iOS 模拟器来了解如何设置模拟器。

如何开始一个新的 React Native 项目

您有多种选择来启动一个与 ABP 协同工作的新 React Native 项目：

1. 使用 ABP Studio

ABP Studio 应用程序是基于 ABP 框架启动 React Native 应用程序最方便、最灵活的方式。您可以按照工具文档并选择以下选项：

2. 使用 ABP CLI

ABP CLI 是创建包含 React Native 应用程序的 ABP 解决方案的另一种方式。只需安装 ABP CLI 并在您的终端中运行以下命令：

abp new MyCompanyName.MyProjectName -csf -u <angular 或 mvc> -m react-native

要查看 CLI 的更多选项，请访问 CLI 手册。

此命令将准备一个包含 Angular 或 MVC（取决于您的选择）、一个 .NET Core 和一个 React Native 项目的解决方案。

如何配置和运行后端

React Native 应用程序不信任自动生成的 .NET HTTPS 证书。您应在开发期间使用 HTTP。

在 Android 仿真器或物理手机上运行的 React Native 应用程序无法连接到 localhost 上的后端。为了解决这个问题，有必要使用 Kestrel 配置来运行后端应用程序。

打开 .DbMigrator 文件夹中的 appsettings.json 文件。将 RootUrl 属性上的 localhost 地址替换为您的本地 IP 地址。然后，运行数据库迁移器。
打开 .AuthServer 文件夹中的 appsettings.Development.json 文件。添加以下配置以接受全局请求，以便在开发环境中测试 React Native 应用程序。
```
{
  "Kestrel": {
    "Endpoints": {
      "Http": {
        "Url": "http://0.0.0.0:44337"
      }
    }
  }
}
```

打开 .HttpApi.Host 文件夹中的 appsettings.Development.json 文件。再次添加此配置以接受全局请求。此外，您将需要如上所述引入认证服务器。

{
  "Kestrel": {
    "Endpoints": {
      "Http": {
        "Url": "http://0.0.0.0:44389" //替换为您的主机端口
      }
    }
  },
  "AuthServer": {
    "Authority": "http://192.168.1.37:44337/", //替换为您的 IP 和认证端口
    "MetaAddress": "http://192.168.1.37:44337/",
    "RequireHttpsMetadata": false,
    "Audience": "MyTieredProject" //替换为您的应用程序名称
  }
}

按照入门文档中所述运行后端应用程序。

如果您将 OpenIddict 用作中央身份管理解决方案，则应关闭 "Https 限制"。因为 IOS 模拟器不支持自签名证书，而 OpenIddict 默认设置为仅与 HTTPS 协同工作。

如何禁用 OpenIddict 的仅限 Https 设置

打开 MyProjectNameAuthServerModule 项目，并将以下代码块复制粘贴到 PreConfigureServices 方法中：

#if DEBUG
    PreConfigure<OpenIddictServerBuilder>(options =>
    {
        options.UseAspNetCore()
            .DisableTransportSecurityRequirement();
    });
#endif

如何配置和运行 React Native 应用程序

确保数据库迁移已完成且 API 已启动并运行。
打开 react-native 文件夹，如果尚未运行 yarn 或 npm install。
打开 react-native 文件夹中的 Environment.ts，并将 apiUrl 和 issuer 属性上的 localhost 地址替换为您的本地 IP 地址，如下所示：