React Native AI

用于构建跨平台移动 AI 应用的全栈框架，支持 LLM（大型语言模型）实时/流式文本和聊天 UI（用户界面）、图像服务以及使用多种模型进行自然语言到图像的转换和图像处理。

查看视频教程 这里

功能特性

• 支持 OpenAI GPT-5.2 + GPT-5 mini、Anthropic Claude Opus/Sonnet/Haiku 4.5 和 Gemini 的 LLM 支持
• 使用 Gemini (Nano Banana) 生成图像
• 来自所有提供商的实时/流式响应
• 服务器代理，可轻松启用身份验证和授权，支持您选择的身份验证提供商。
• 主题设置（开箱即用包含 5 个主题）- 只需几行代码即可轻松添加更多主题。

使用方法

运行以下命令生成新项目：

npx rn-ai

接下来，您可以通过 CLI（命令行接口）配置您的环境变量，或者稍后再进行配置。

运行应用

进入应用目录并运行：

npm start

运行服务器

进入服务器目录并运行：

npm run dev

环境变量

服务器环境变量位于 server/.env.example 中。如果不存在，请将此文件名更新为 .env 并配置服务器环境变量。Gemini 图像生成需要 GEMINI_API_KEY。

主题设置

要添加新主题，请打开 app/src/theme.ts 并使用以下配置添加新主题：

const christmas = {
  // extend an existing theme or start from scratch
  ...lightTheme,
  name: 'Christmas',
  label: 'christmas',
  tintColor: '#ff0000',
  textColor: '#378b29',
  tabBarActiveTintColor: '#378b29',
  tabBarInactiveTintColor: '#ff0000',
  placeholderTextColor: '#378b29',
}

在文件底部导出新主题：

export {
  lightTheme, darkTheme, hackerNews, miami, vercel, christmas
}

配置 LLM 模型

以下是添加或移除现有 LLM 模型的方法。

在应用中

您可以通过更新 constants.ts 中的 MODELS 来添加或配置模型。

对于移除模型，只需删除您不支持的模型即可。

对于添加模型，一旦将模型定义添加到 MODELS 数组中，您应该更新 src/screens/chat.tsx 以支持新模型：

1. 创建本地状态以保存新模型数据
2. 更新 chat() 函数以处理新模型类型
3. 创建 generateModelReponse 函数以调用新模型
4. 更新 utils.ts 中的 getChatType 以配置与您服务器路径对应的 LLM 类型。
5. 在 UI 中渲染新模型

{
  chatType.label.includes('newModel') && (
    <FlatList
      data={newModelReponse.messages}
      renderItem={renderItem}
      scrollEnabled={false}
    />
  )
}

在服务器上

在 server/src/chat 文件夹中创建一个新文件，对应您在移动应用中创建的模型类型。您可以复制并重用其他现有路径中的许多流式代码以开始工作。

接下来，更新 server/src/chat/chatRouter 以使用新路由。

配置图像模型

以下是添加或移除现有图像模型的方法。

在应用中

您可以通过更新 constants.ts 中的 IMAGE_MODELS 来添加或配置模型。

对于移除模型，只需删除您不支持的模型即可。

对于添加模型，一旦将模型定义添加到 IMAGE_MODELS 数组中，您应该更新 src/screens/images.tsx 以支持新模型。

主要考虑因素是输入。该模型是否接受文本、图像或两者作为输入？

应用已配置为处理两者，但您必须更新 generate 函数以相应地将值传递给 API（应用程序编程接口）。

在服务器上

Gemini (Nano Banana)

Gemini 图像生成在 server/src/images/gemini.ts 中处理。配置 GEMINI_API_KEY 并从设置屏幕选择 Nano Banana 图像模型。

其他 API 提供商

在 server/src/images/modelName 中创建一个新文件，更新处理器函数以处理新的 API 调用。

接下来，更新 server/src/images/imagesRouter 以使用新路由。

React Native AI 快速上手指南

React Native AI 是一个全栈框架，支持构建跨平台移动 AI 应用。它集成了 LLM（大语言模型）实时流式对话、图像生成及处理功能，开箱即用，支持多种主题和认证代理。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• Node.js: 建议安装 LTS 版本（v18+）。
• 移动端环境: iOS Simulator / Android Emulator 或真机调试环境。
• API 密钥: 需提前申请并准备好以下服务的 Key（根据需求选择）：
  • OpenAI API Key
  • Anthropic API Key
  • Google Gemini API Key（用于图像生成）
• 网络环境: 由于涉及访问海外 AI 服务，请确保网络环境可稳定连接相关 API 端点。

安装步骤

1. 初始化项目 使用 npx 创建新项目脚手架：

   npx rn-ai
   

2. 配置环境变量 进入服务器目录，复制示例配置文件并修改为实际配置：

   cd server
   cp .env.example .env
   

   编辑 server/.env 文件，填入必要的 API Key（如 GEMINI_API_KEY）。

基本使用

项目启动后包含前端应用和后端服务器两个部分，需分别运行。

1. 启动应用 进入应用目录并启动开发服务器：

   npm start
   

2. 启动服务端 进入服务器目录并运行开发模式：

   npm run dev
   

3. 基础配置与扩展

   • 主题定制: 修改 app/src/theme.ts 即可添加新主题。
   • 模型配置:
     • 在 constants.ts 中更新 MODELS 或 IMAGE_MODELS 数组以启用/禁用模型。
     • 新增模型需在 src/screens/chat.tsx 或 images.tsx 中补充 UI 逻辑，并在 server/src/chat 或 server/src/images 下对应创建路由处理文件。

完成上述步骤后，即可在移动端查看聊天界面或图像生成功能。