使用纯 React.js 和 Capacitor 构建移动应用

This tutorial will walk you through crafting a mobile application using React, Capacitor, and Konsta UI. By the end, you’ll know how to morph a React.js web app into a native mobile application with Capacitor, and implement a native UI using Konsta UI.

Capacitor 可以轻松将您的 React.js 网页应用转换为原生移动应用，无需进行重大修改或学习新的策略，如 React Native。

该过程涉及几个简单的步骤，很快您的 React.js 应用就会成为一个功能齐全的移动应用。因此，请继续关注，我们将指导您完成此旅程。

Capacitor 简介

CapacitorJS 是一个革命性的工具。它可以轻松与任何 web 项目集成，并将您的应用包装在一个原生 webview 中，同时生成 Xcode 和 Android Studio 项目。通过其插件，您还可以访问设备的原生功能，如摄像头的 JS 桥。

Capacitor 提供了一种简单的方式来创建原生移动应用，无需任何麻烦或陡峭的学习曲线。其简单的 API 和流线化的功能使其易于在您的项目中集成。

设置您的 React.js 应用

让我们使用最简单的方法来启动一个 React 应用。我们将使用 npm 包管理器来创建一个新的 React 应用：

npx create-react-app my-app

为了将我们的项目转换为原生移动应用，我们需要 export 我们的应用。

我们会在下一刻回来。首先，让我们了解如何将 Capacitor 集成到我们的 React 应用中。

将 Capacitor 集成到您的 React.js 应用

初始设置步骤可能会有点详细，但之后，更新您的本机应用包装器就像运行一个 sync 命令

一样简单。首先，我们将安装 Capacitor CLI 作为开发依赖项，并在我们的项目中设置它。在设置过程中，按“回车”键接受默认值即可。

接下来，我们将安装核心包和 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

The ios 和 android 目录现在出现在您的React.js项目中。

要在后期访问Android项目，请安装 Android Studio。对于iOS，您需要一台Mac，并应安装 Xcode.

接下来，更新 webDir 在您的 capacitor.config.json 文件如以下所示：

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

运行构建命令并同步您的项目与 Capacitor:

npm run build
npx cap sync

The npm run build 命令将构建您的 React.js 项目，而 npx cap sync 将使 web code 在native 平台的准确位置以便在app中执行。

现在，运气好且无错误，您的 React.js 应用程序应该已准备好在设备上发布！

构建和部署您的原生应用

开发iOS应用需要 Xcode, Android应用则需要 Android Studio. 如果您打算在应用商店上发布您的应用程序，必须在 iOS 和 Android 上注册 Apple Developer Program 和 Google Play Console。

The Capacitor CLI 简化了打开两个本机项目的过程：

npx cap open ios
npx cap open android

一旦您的本机项目设置完成，部署应用程序到连接的设备就是一个简单的过程。

对于 Android Studio，等待所有内容加载完成，然后将应用程序部署到连接的设备。

对于 Xcode，建立您的签名账户以将应用程序部署到真实设备而不是仅仅模拟器。完成后，只需点击播放即可在连接的设备上运行应用程序，您可以在顶部选择。

如果一切顺利，您将将您的 React.js 网页应用程序转换为本机移动应用程序！

Capacitor Live Reload

现代开发框架通常都带有热重载功能，幸运的是，您可以在 Capacitor 上实现相同的功能，但 在您的移动设备上!

您可以通过让 Capacitor 应用程序从特定 URL 加载内容来使您的本地托管应用程序在您的网络上可访问。

首先，确定您的本地 IP 地址。mac 上可以通过在终端中运行 ipconfig getifaddr en0 windows 上执行 ipconfig and look for the IPv4 address.

After this, instruct Capacitor to load the app directly from the server by adding another parameter to your capacitor.config.ts 文件：

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

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

export default config;

确保使用准确的 IP 和端口。运行 npx cap copy 以应用这些更改到我们的原生项目中。

在通过 Android Studio 或 Xcode 部署应用程序一遍之后，React 应用程序中的任何更改都会自动重新加载并在应用程序中显示！

请记住，如果安装了新插件，如摄像头，它需要重新构建原生项目。这是因为原生文件已经改变，并且无法在实时更新。

使用 Capacitor 插件

让我们快速了解一下如何使用 Capacitor 插件。让我们安装一个简单的插件，分享插件”，它会提示原生分享对话框：要使用它，导入包并调用相应的方法。要使用它，导入包并调用相应的方法。

npm i @capacitor/share

要使用它，导入包并调用相应的方法。 share() function 从我们的 app 中获取。考虑到 App.js:

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

function ShareButton() {
  const share = async () => {
    await Share.share({
      title: 'React App',
      text: 'Visit this React App',
      url: 'http://localhost:3000',
      dialogTitle: 'Share with...'
    });
  };

  return (
    <button onClick={share}>
      Share
    </button>
  );
}

export default ShareButton;

安装新插件后，记得再次使用 npx cap sync.

实现 Konsta UI：更美观的移动 UI

为了获得更美观的移动 UI 体验，我们将使用 Konsta UI。它提供了 iOS 和 Android 专有的样式，并且易于使用。

要使用 Konsta UI，请安装 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 包装在 App 中的 src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import {App} from 'konsta/react';
import './index.css';
import MyApp from './App';

ReactDOM.render(
  <React.StrictMode>
    <App theme="ios">
      <MyApp />
    </App>
  </React.StrictMode>,
  document.getElementById('root')
);

让我们在我们的 React.js 页面中使用 Konsta UI React 组件。打开 src/App.js and modify it to:

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

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

      <Block strong>
        <p>
          Welcome to your React & Konsta UI app.
        </p>
      </Block>
      
      <List>
        <ListItem href="/about" title="About" />
      </List>

      <Block strong>
        <Button>Click Me</Button>
      </Block>
    </Page>
  );
}

如果一切都做得正确，你应该看到React和Konsta UI之间的无缝整合，给你的移动应用添加原生外观。

结论

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

感谢像Capacitor这样的技术，使用React.js Web应用构建移动应用从未如此简单。将你的Web开发技能提升到下一个水平，通过打造出色的原生移动应用。Happy coding!

为了了解如何快速推进你的应用开发过程，注册免费账户今天。

继续从Building Mobile Apps with Pure React.js和Capacitor

如果你正在使用 Building Mobile Apps with Pure React.js和Capacitor 来规划原生媒体和界面行为，连接它使用@capgo/capacitor-live-activities 为@capgo/capacitor-live-activities提供原生能力 @capgo/capacitor-live-activities 为@capgo/capacitor-live-activities提供实现细节使用@capgo/capacitor-video-player 为@capgo/capacitor-video-player提供原生能力 @capgo/capacitor-video-player 为@capgo/capacitor-video-player提供实现细节使用@capgo/capacitor-native-navigation 为@capgo/capacitor-native-navigation提供原生能力

使用纯净的 React.js 和 Capacitor 构建移动应用