使用纯 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 Web应用转换为原生移动应用，无需进行重大更改或学习新策略，如React Native。

该过程涉及几个简单的步骤，很快您的React.js应用就会成为一个功能齐全的移动应用。因此，请继续阅读本教程，了解如何将您的React.js应用转换为原生移动应用。

Capacitor概述

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

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

设置您的 React.js 应用程序

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

npx create-react-app my-app

为了将我们的项目转换为原生移动应用程序，我们需要一个 export 。我们将在下一刻回来。首先，让我们了解如何将 __CAPGO_KEEP_0__ 集成到我们的 React 应用程序中。

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

Integrating Capacitor into Your React.js App

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

First, we’ll install the Capacitor CLI as a development dependency and set it up within our project. During the setup, accept the default values for name and bundle ID by pressing “enter.”

接下来，我们将安装核心包和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 平台的准确位置以便在应用中执行。

现在，希望运气好，没有错误，您的 React.js 应用应该已经准备好在设备上发布!

构建和部署您的原生应用

开发 iOS 应用需要 Xcode需要在 iOS 和 Android 平台上发布应用时，必须注册 Apple Developer Program 和 Google Play Console。 Android Studio如果您打算在应用商店上发布应用，必须在 iOS 和 Android 平台上注册 Apple Developer Program 和 Google Play Console。

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 并查找 IPv4 地址。

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;

在通过 Android Studio 或 Xcode 部署应用程序后，再次部署应用程序后，任何 React 应用程序的更改都会自动重新加载并在您的应用程序中显示！ npx cap copy 请记住，如果安装了新插件，例如相机，则需要重新构建您的本机项目。这是因为本机文件已更改且无法在实时更新。

使用__CAPGO_KEEP_0__插件

让我们快速了解一下如何使用__CAPGO_KEEP_0__插件。让我们安装一个简单的插件，分享插件

Using Capacitor Plugins

Let’s take a quick look at how to use a Capacitor plugin. Let’s install a simple one, the and look for the IPv4 address. After this, instruct __CAPGO_KEEP_0__ to load the app directly from the server by adding another parameter to your file: Be sure to use the accurate IP and port. Run to apply these changes to our native project. Upon deploying your app one more time through Android Studio or Xcode, any changes in your React app will automatically be reloaded and displayed on your app! Do keep in mind that if new plugins are installed, such as the camera, it necessitates a rebuild of your native project. This is because the native files will have changed and cannot be updated on the fly. Using __CAPGO_KEEP_0__ Plugins Let’s take a quick look at how to use a __CAPGO_KEEP_0__ plugin. Let’s install a simple one, the Share plugin, which prompts the native share dialog:

npm i @capacitor/share

为了使用它，请导入包并从我们的应用程序中调用相应的函数。考虑到 share() 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;

实现 Konsta UI：更好的移动 UI npx cap sync.

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

要使用 Konsta UI，请安装 React 包：

修改您的

npm i konsta

文件如下： tailwind.config.js 将补充您的当前 Tailwind CSS 配置文件中的变体和必需的实用程序以支持 Konsta UI。

// 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 现在，设置主 App 组件以设置全局参数，如

例如， theme. Wrap the main app with App in the 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')
);

让我们使用 Konsta UI React 组件在我们的 React.js 页面中。打开 src/App.js 并修改为：

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