Pure React.jsとCapacitorでモバイルアプリを構築する

このチュートリアルでは、React、Capacitor、Konsta UIを使用してモバイルアプリケーションを作成する方法を紹介します。最終的には、Capacitorを使用してReact.jsのWebアプリをネイティブモバイルアプリケーションに変換し、Konsta UIを使用してネイティブUIを実装することができます。

Capacitorは、React.jsのWebアプリをネイティブモバイルアプリケーションに変換するための簡単な方法を提供し、React Nativeなどの新しい戦略を学ぶ必要がなく、または大きな変更を加える必要がなく、React Nativeなどの新しい戦略を学ぶ必要がなく、または大きな変更を加える必要がなく、

このプロセスには、数ステップしか必要ではなく、React.jsアプリが完全に機能するモバイルアプリケーションになるまで、すぐに実行できます。なので、ここで私たちがこの旅を案内するのを待ってください。

Capacitor概要

CapacitorJSはゲームチェンジャーです。どのWebプロジェクトでもシームレスに統合でき、ネイティブのWebビューにアプリをラップし、ネイティブのXcodeとAndroid Studioプロジェクトを生成します。また、プラグインを使用して、カメラなどのネイティブデバイス機能にアクセスできます。

Capacitor offers a straightforward way to create a native mobile application without any hassle or steep learning curve. Its simple API and streamlined functionality make it easy to incorporate into your project.

__CAPGO_KEEP_1__とストリーミングされた機能は、プロジェクトに簡単に組み込むことができます。

Let’s go for the simplest method to initiate a React application. We’ll use the npm package manager to create a new React app:

npx create-react-app my-app

モバイルアプリを構築するには、__CAPGO_KEEP_0__パッケージマネージャーを使用して、Reactアプリケーションを作成します。 export はアプリの

はもう少し待ってください。まず、CapacitorをReactアプリに統合する方法を理解しましょう。

CapacitorをReact.jsアプリに統合する

初期設定の手順は少し詳細になるかもしれませんが、その後、ネイティブアプリラッパーを更新することは、単にコマンドを実行するだけの簡単な作業です。 sync まず、__CAPGO_KEEP_0__と__CAPGO_KEEP_1__を開発依存モジュールとしてインストールし、プロジェクト内でセットアップします。セットアップ中は、名前とバンドルIDのデフォルト値に「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.”

最後に、プラットフォームを追加し、__CAPGO_KEEP_0__はプロジェクトルートで各プラットフォーム用のフォルダを作成します:

Finally, we’ll add the platforms, and Capacitor will create folders for each platform at our project root:

# 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

ios と and android __CAPGO_KEEP_0__

Androidアプリを後で参照するには、 Android StudioiOSの場合はMacが必要で、 Xcode.

次に、 webDir を capacitor.config.json ファイルに次のように更新します。

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

Run the build command and sync your project with Capacitor:

npm run build
npx cap sync

The npm run build コマンドは、React.jsプロジェクトをビルドします。 npx cap sync は、Web codeを正確な場所に配置して、ネイティブプラットフォームで実行できるようにします。

今、少しお Fortune とエラーがなければ、React.jsアプリはデバイスで起動できるはずです!

ネイティブアプリのビルドとデプロイ

iOSアプリの開発には Xcodeが必要です。Androidアプリの開発には Android Studioが必要です。アプリをアプリストアで配布する場合、iOSにはApple Developer Programに登録し、AndroidにはGoogle Play Consoleに登録する必要があります。

The Capacitor CLI simplifies the process of opening both native projects:

npx cap open ios
npx cap open android

ネイティブプロジェクトが設定されたら、接続されたデバイスにアプリをデプロイするプロセスは簡単です。

Android Studioの場合、すべての内容が読み込まれたら、実機にアプリを展開してください。

Xcodeの場合、実機にアプリを展開するには、署名アカウントを設定する必要があります。そうすることで、シミュレータではなく実機でアプリを実行できます。実機にアプリを展開するには、上部で選択した実機にアプリを実行することができます。

すべてがうまくいった場合、React.jsのWebアプリをネイティブモバイルアプリに変換することができます。

Capacitor Live Reload

モダンな開発フレームワークは通常、ホットリロードを備えています。幸いにも、Capacitor もホットリロードを実現できます。 __CAPGO_KEEP_0__!

ローカルにホストされているアプリケーションを、Capacitor で実行することで、ネットワーク上でライブリロードを実現できます。

まず、ローカルIPアドレスを決定する必要があります。Macの場合、ターミナルで ipconfig getifaddr en0 を実行してください。Windowsの場合、 ipconfig を実行してください。IPv4アドレスを探してください。

次に、Capacitor をサーバーから直接読み込むように指示する必要があります。ファイル capacitor.config.ts __CAPGO_KEEP_0__

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アドレスとポート番号を使用してください。Run npx cap copy Capgoの設定を適用するにはこのプロジェクトを使用してください。

Android StudioまたはXcodeを使用してアプリを再度デプロイすると、Reactアプリの変更は自動的にロードされ、アプリに表示されます!

新しいプラグインがインストールされた場合、カメラなどの場合、ネイティブプロジェクトを再構築する必要があります。これは、ネイティブファイルが変更されたため、オンザフライで更新できませんからです。

Capacitor プラグインの使用

Capacitor プラグインを使用する方法を簡単に確認してみましょう。 __CAPGO_KEEP_0__ プラグインのインストールに簡単なものを使用しましょう。Share プラグイン

npm i @capacitor/share

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;

新しいプラグインをインストールした後は、再度ReactプロジェクトをSyncしてください。 npx cap sync.

Konsta UIを実装する: より美しいモバイルUI

より美しいモバイルUI体験を実現するために、Konsta UIを使用します。 iOSとAndroid用のスタイリングを提供し、扱いやすいものです。

Konsta UIを使用するには、Reactパッケージをインストールしてください:

npm i konsta

__CAPGO_KEEP_0__を修正する tailwind.config.js __CAPGO_KEEP_0__ファイルを修正するようにしてください:

// 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 Konsta UIのために必要な追加のバリアントとユーティリティを、現在のTailwind CSS設定に追加するようにします。

現在のAppコンポーネントを設定して、グローバルパラメータを設定するようにしてください。 themeAppコンポーネントを使用して、主なアプリケーションをラップしてください。 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 __CAPGO_KEEP_0__を修正してください:

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