使用React和Capacitor构建移动应用

本教程中，我们将从一个新的 React 应用程序开始，逐步过渡到使用 Capacitor 的原生移动开发。您也可以选择添加 Konsta UI

Capacitor allows you to easily convert your React web application into a native mobile app without significant modifications or learning a new skill like React Native.

__CAPGO_KEEP_0__ 允许您轻松将 React 网络应用程序转换为原生移动应用程序，无需进行重大修改或学习新的技能，如 React Native。

This tutorial will guide you through the process, starting with a new React app and then incorporating Capacitor to move into the realm of native mobile apps. Additionally, you can optionally use 本教程将指导您完成整个过程，首先从一个新的 React 应用程序开始，然后使用 __CAPGO_KEEP_0__ 进入原生移动应用程序的世界。另外，您也可以选择使用 Konsta UI

About Capacitor

关于 __CAPGO_KEEP_0__

With Capacitor, you get a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it a breeze to integrate into your project. Trust me, you’ll be amazed at how effortless it is to achieve a fully functional native app with Capacitor!

准备您的 React 应用程序

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

npx create-react-app my-app

为了创建一个原生移动应用程序，我们需要一个 export 我们的项目。因此，让我们在我们的 package.json 中包含一个简单的脚本，以便可以利用它来构建和导出 React 项目：

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

您现在可以放心地 npm run build ，并且应该能够在您的项目根目录中看到一个新鲜的 out 文件夹。

此文件夹将由 Capacitor 后续使用，但现在我们必须正确设置它。

将 Capacitor 添加到您的 React 应用程序

为了将任何 web 应用打包到原生移动容器中，我们必须遵循几个初始步骤，但之后只需执行一个 sync 命令即可。

首先，我们可以将 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，并应安装 Xcode.

此外，您应该在项目中找到一个 capacitor.config.ts file in your project, which contains some fundamental Capacitor settings utilized during the sync. The only thing you need to pay attention to is the __CAPGO_KEEP_0__设置，这些设置在同步过程中会被使用。您需要注意的是

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 到 native 平台的正确位置，以便它们可以在应用中显示。

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

命令即可。

Build and Deploy native apps

为了开发iOS应用，您需要安装 Xcode 并且为了开发Android应用，您需要安装 Android Studio 。此外，如果您打算将应用发布到应用商店，则需要在iOS中注册Apple Developer Program，在Android中注册Google Play Console。

如果您是native移动开发的新手，可以使用Capacitor CLI轻松打开双端native项目：

npx cap open ios
npx cap open android

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

android-studio-run

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

xcode-run

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

但等一下，开发期间还有更快的方法……

Capacitor Live Reload

到目前为止，您可能已经习惯了所有现代框架中的热重载功能，好消息是您可以在移动设备上实现相同的功能 只需花费最少的努力! 通过让__CAPGO_KEEP_0__应用程序从特定URL加载内容来启用对您本地托管应用程序的访问

在您的网络上 第一步是确定您的本地IP地址。如果您使用Mac，可以通过在终端中运行以下命令来查找此信息： by having the Capacitor app load the content from the specific URL.

然后查找IPv4地址

ipconfig getifaddr en0

__CAPGO_KEEP_0__

ipconfig

__CAPGO_KEEP_0__

We can instruct Capacitor to load the app directly from the server by adding another entry to our 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 和端口，我在这个例子中使用了默认的 React 端口。

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

npx cap copy

命令与 copy 类似，但它只会 sync复制到 web 文件夹和配置中做出的修改 而不更新原生项目。 您现在可以通过 Android Studio 或 Xcode 再次部署您的应用程序。之后，如果您在 React 应用程序中更改了什么

__CAPGO_KEEP_0__ 应用将自动重载 并显示更改！

请注意 如果您安装了新插件，如摄像头插件，它仍然需要重建您的原生项目。这是因为原生文件已更改，而不能在实时进行。

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

使用Capacitor插件

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

npm i @capacitor/share

没有什么特别的关于分享插件但是它仍然会弹出原生分享对话框！现在我们只需要导入包并调用 share() 函数即可。让我们修改 src/App.js to this:

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

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

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

添加Konsta UI

我已经与 Ionic 一起工作了多年，用于构建跨平台应用，它曾经是最佳选择，但现在我不再推荐它了；它很难与React集成，而且不值得，当您已经有 tailwindcss.

了时，您可以获得适应iOS和Android特定样式的出色移动UI，我推荐使用Konsta UI。

您需要有 tailwind已经安装

要使用它，我们只需要安装react包：

npm i konsta

另外，您还需要修改 tailwind.config.js 文件：

// 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组件了。

For example, let’s open src/App.js and change it to the following:

// 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;

If the live reload is out of sync after installing all the necessary components, try restarting everything. Once you have done that, you should see a mobile app with a somewhat native look, built with React and Capacitor!

You should see the following page as a result:

Conclusion

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

并且通过添加 Capgo如果您想学习如何将 __CAPGO_KEEP_0__ 添加到您的 React 应用中，请查看下一篇文章：

继续阅读 Building Mobile Apps with React 和 Capgo

Capacitor

如果您正在使用 使用 React 和 Capacitor 构建移动应用 为 __CAPGO_KEEP_0__ CI/CD 规划自动化，连接它 Capgo CI/CD 在 Capgo CI/CD 中为产品工作流程 Capgo 原生构建在 Capgo 原生构建中为产品工作流程 Capgo 集成在 Capgo 集成中为产品工作流程 CI/CD 集成 CI/CD 集成的实现细节 GitHub 动作集成关于在GitHub Actions Integration中实现细节。