跳过主要内容
Capgo logo
教程

使用React和Capacitor构建移动应用

了解如何使用React、Capacitor和Konsta UI构建一个移动应用并增强原生UI。

马丁·多纳迪厄

马丁·多纳迪厄

内容营销人员
使用React和Capacitor构建移动应用

在本教程中，我们将从一个新的 React 应用开始，然后转向使用Capacitor进行原生移动开发。您也可以选择添加 Konsta UI 为了获得一个改进的移动 UI 以及 Tailwind CSS.

Capacitor 让您轻松将您的 React 网页应用转换为原生移动应用，无需进行重大修改或学习新的技能，如 React Native.

通过几个简单的步骤，大多数 React 应用程序可以转换为移动应用.

本教程将指导您完成整个过程，首先从一个新的 React 应用程序开始，然后将 Capacitor 引入到原生移动应用的领域中。此外，您还可以选择使用 Konsta UI 来增强您的移动 UI 以及 Tailwind CSS.

关于 Capacitor

CapacitorJS 是一个革命性的工具！您可以轻松将其集成到任何 web 项目中，它将您的应用程序包装在一个原生 webview 中，生成原生 Xcode 和 Android Studio 项目。此外，它的插件提供了对原生设备功能的访问，如摄像头的 JS 桥.

使用 Capacitor，您可以获得一个出色的原生移动应用，无需进行复杂的设置或陡峭的学习曲线。它的 API 和流线化的功能使其成为轻松集成到您的项目中的一个好工具。相信我，您将惊讶于如何轻松地使用 Capacitor 实现一个功能齐全的原生应用！

准备您的 React 应用程序

虽然有各种方法来启动 React 应用程序，但在本教程中，我们将选择最简单的方法来提供一个空白的 React 应用程序：

npx create-react-app my-app

为了创建一个原生移动应用，我们需要一个 我们的项目的输出。因此，让我们在我们的 package.json 中添加一个简单的脚本，以便可以利用它来构建和输出 React 项目： 您现在可以无忧无虑地运行，并应该能够在项目根目录中看到一个新鲜的输出文件夹。

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

此文件夹将由 __CAPGO_KEEP_0__ 后续使用，但现在我们必须正确设置它。 npm run build 将 __CAPGO_KEEP_0__ 添加到您的 React 应用程序中

This folder will be used by Capacitor later on, but for now, we must set it up correctly.

Adding Capacitor to Your React App

首先，我们可以安装 sync __CAPGO_KEEP_0__ __CAPGO_KEEP_1__

__CAPGO_KEEP_0__ Capacitor CLI 作为开发依赖项，并在我们的项目中设置它。在设置过程中，您可以按“回车”键接受名称和包ID的默认值。

接下来，我们需要安装核心包和iOS和Android平台的相关包。

最后，我们可以添加平台，Capacitor将在我们的项目根目录下为每个平台创建文件夹：

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your React project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

到目前为止，您应该能够在您的React项目中观察到新的 ios 和 android 文件夹。这些是真正的本机项目！

要在将来访问Android项目，必须安装

Android Studio 。对于iOS，需要Mac，并应安装iOS Xcode.

另外，您应该在项目中找到一个 capacitor.config.ts 文件，其中包含一些基本的Capacitor设置，用于同步过程。您需要注意的是 webDir，它必须指向您的构建命令的结果。目前，这个设置不准确。

为了修复这个问题，请打开 capacitor.config.json 文件，并更新 webDir:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "out",
  "bundledWebRuntime": false
}

您可以通过执行以下命令来尝试它：

npm run build
npx cap sync

第一个命令 npm run build 会简单地构建您的 React 项目并导出静态构建。

而第二个命令 npx cap sync 会同步所有的 web code 到原生平台的正确位置，以便在应用中显示。

此外，同步命令可能会更新原生平台并安装插件，因此当您安装新的 Capacitor 插件时 npx cap sync ，它是时候运行

了。

不经意间，您现在实际上已经完成了，所以让我们在设备上看看应用!

构建和部署原生应用 为了开发 iOS 应用，您需要安装 Xcode Android Studio 已安装。另外，如果您打算在应用商店上发布应用，则需要为 iOS 和 Android 分别在 Apple Developer Program 和 Google Play Console 中注册。

如果您是新手，想开始使用原生移动开发，那么可以使用 Capacitor CLI 来轻松打开原生项目：

npx cap open ios
npx cap open android

一旦您设置了原生项目，部署应用到连接设备就很容易了。在 Android Studio 中，只需等待所有内容就绪，然后您可以在不更改任何设置的情况下将应用部署到连接设备。以下是示例：

android-studio-run

在 Xcode 中，需要设置签名账户才能将应用部署到真实设备，而不是仅在模拟器上运行。如果您之前没有这样做过，Xcode 会指导您完成此过程（但请再次注意，您需要在 Developer Program 中注册）。完成后，您只需点击“播放”即可在连接设备上运行应用，您可以在顶部选择设备。以下是示例：

xcode-run

恭喜！您已成功将 React 网页应用部署到移动设备。以下是示例：

react-mobile-app

但请稍等，开发期间还有更快的方法……

Capacitor Live Reload

到目前为止，您可能已经习惯了所有现代框架的热重载功能，好消息是您也可以获得相同的功能 在移动设备上 只需轻松操作!

启用对本地托管应用程序的访问，实时重载 在您的网络上 通过让Capacitor应用程序从特定URL加载内容

第一步是确定您的本地IP地址。如果您使用Mac，可以通过在终端中运行以下命令来找到它：

ipconfig getifaddr en0

在Windows上运行：

ipconfig

然后查找IPv4地址

我们可以通过在文件中添加另一个条目来指示Capacitor从服务器直接加载应用程序： capacitor.config.ts 请务必使用

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'out',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:3000',
    cleartext: true
  }
};

export default config;

正确的IP和端口 file:, 我们使用了默认的 React 端口在这个例子中。

现在，我们可以将这些更改复制到我们的原生项目中：

npx cap copy

原生项目 copy 命令类似于 sync,但它只会 复制到 web 文件夹和配置中 而不更新原生项目。

您现在可以通过 Android Studio 或 Xcode 再次部署您的应用程序。之后，如果您在 React 应用程序中更改了什么 应用程序将自动重新加载 并显示更改！

请注意 如果您安装了新插件，如摄像头，它仍然需要重新构建原生项目。这是因为原生文件发生了变化，不能在实时中完成。

请注意，您应该在配置中使用正确的 IP 和端口。上面的code块显示了用于演示目的的默认 React 端口。

使用Capacitor插件

让我们看看如何使用Capacitor插件的示例，这是我们之前提到的几次。要实现这一点，我们可以通过运行以下命令来安装一个相当简单的插件：

npm i @capacitor/share

虽然没有什么特别的，但"分享插件"仍然会弹出原生分享对话框！ 为了实现这一点，我们现在只需要导入包并调用函数。让我们将 share() src/App.js 修改为： 如前所述，当安装新插件时，我们需要执行同步操作，然后重新部署应用到设备上。要实现这一点，请运行以下命令：

import React from 'react';
import { Share } from '@capacitor/share';

function App() {
  const share = async () => {
    await Share.share({
      title: 'Open Youtube',
      text: 'Check new video on youtube',
      url: 'https://www.youtube.com',
      dialogTitle: 'Share with friends'
    });
  };

  return (
    <div>
      <h1>Welcome to React and Capacitor!</h1>
      <p>
        <h2>Cool channel</h2>
        <button onClick={() => share()}>Share now!</button>
      </p>
    </div>
  );
}

export default App;

点击按钮后，您可以亲眼目睹美丽的原生分享对话框!

npx cap sync

react-__CAPGO_KEEP_0__-share

react-capacitor-share

为了让按钮看起来更适合移动设备，我们可以使用我的最喜欢的UI组件库来添加一些样式 - React（无恶意）。

添加Konsta UI

我已经与 Ionic 一起工作了很多年， 它是几年来为我推荐的最佳选择之一。但是现在我不再推荐它了，因为它很难与React集成，而且当你已经有.

tailwindcss

如果您想拥有一个适合iOS和Android特定样式的漂亮的移动UI，我推荐使用Konsta UI。 您需要先安装

tailwind

npm i konsta

要使用它，我们只需要安装 tailwind.config.js react

// import konstaConfig config
const konstaConfig = require('konsta/config')

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: [
    './src/**/*.{js,ts,javascript,tsx}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfig 将扩展默认（或自定义的）Tailwind CSS配置文件，添加一些额外的变体和辅助工具以支持Konsta UI。

现在我们需要设置主 App 组件，以便我们可以设置一些全局参数（如 theme).

我们需要将整个应用程序包裹在 App 中 src/App.js:

import { App } from 'konsta/react';
import './App.css';

function MyApp({ Component, pageProps }) {
  return (
    // Wrap our app with App component
    <App theme="ios">
      <Component {...pageProps} />
    </App>
  );
}

export default MyApp;

示例页面

现在设置完成后，我们可以在React应用程序中使用Konsta UI React组件。

例如，让我们打开 src/App.js 并将其更改为以下内容：

// Konsta UI components
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
  Link,
  BlockTitle,
} from 'konsta/react';

function App() {
  return (
    <Page>
      <Navbar title="My App" />

      <Block strong>
        <p>
          Here is your React & Konsta UI app. Let's see what we have here.
        </p>
      </Block>
      <BlockTitle>Navigation</BlockTitle>
      <List>
        <ListItem href="/about/" title="About" />
        <ListItem href="/form/" title="Form" />
      </List>

      <Block strong className="flex space-x-4">
        <Button>Button 1</Button>
        <Button>Button 2</Button>
      </Block>
    </Page>
  );
}

export default App;

如果安装所有必要组件后，实时重新加载出现了延迟，尝试重新启动所有内容。一旦你完成了这些，你应该看到一个使用React和Capacitor构建的native样式的移动应用程序。

你应该看到以下页面作为结果：

konsta-react

结论

Capacitor 是基于现有 Web 项目构建原生应用的出色选择，提供了一个简单的方式来共享 code 并保持一致的 UI。

并且，通过添加 Capgo, it’s even easier to add live updates to your app, ensuring that your users always have access to the latest features and bug fixes.

If you would like to learn how to add Capgo to your React app, take a look at the next article:

为Capacitor应用提供实时更新

当web层bug处于活跃状态时，通过Capgo将修复推送到应用，而不是等待几天的应用商店审批。用户在后台接收更新，而原生更改保持在正常审批路径中。

立即开始

最新博客

Capgo 为您提供创建真正专业的移动应用所需的最佳见解。

Capacitor 应用中的双向通信
开发,移动,更新
2025 年 4 月 26 日

Capacitor 应用中的双向通信

避免 5 个常见的 OTA 更新错误
开发,安全,更新
2025 年 4 月 13 日

避免 5 个常见的 OTA 更新错误

5 移动应用实时更新的安全最佳实践
开发,移动,更新
2025 年 1 月 14 日

5 移动应用实时更新的安全最佳实践

查看我们的博客中的所有内容