This tutorial will walk you through crafting a mobile application using React and Capacitor. By the end, you’ll know how to morph a React.js web app into a native mobile application with Capacitor, and add a native feel with Capgo Native Navigation and Transitions.
Capacitorは、React.jsウェブアプリケーションをネイティブモバイルアプリケーションに変換することを容易にし、React Nativeなどの新しい戦略を学ぶ必要がなく、重要な変更も必要ありません。
このプロセスにはいくつかの簡単なステップが含まれ、React.jsアプリケーションが完全に機能するモバイルアプリケーションになるまで、すぐに完了します。
Capacitorの概要
CapacitorJSはゲームチェンジャーです。ウェブプロジェクトと組み合わせてネイティブウェブビューにアプリケーションをwrapし、ネイティブのXcodeとAndroid Studioプロジェクトを生成することができます。また、JSブリッジを通じてカメラなどのネイティブデバイス機能にアクセスすることもできます。
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.
React.jsアプリケーションの設定
Reactアプリケーションを開始する最も簡単な方法を使用してみましょう。npmパッケージマネージャーを使用して新しいReactアプリケーションを作成します。
npx create-react-app my-appモバイルアプリケーションに変換するには、アプリケーションの export が必要です。
ここでは、CapacitorをReactアプリケーションに統合する方法を理解することから始めましょう。
React.jsアプリにCapacitorを統合する
初期設定手順は少し詳細になるかもしれませんが、その後、ネイティブアプリラッパーを更新することは、コマンドを実行するだけになります。 sync 最初は、__CAPGO_KEEP_0__ __CAPGO_KEEP_1__を開発依存モジュールとしてインストールし、プロジェクト内で設定します。セットアップ中は、名前とバンドルIDのデフォルト値に「エンター」を押してください。
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 androidios と android ディレクトリは、現在React.jsプロジェクト内に存在しています。 Androidプロジェクトにアクセスするには、
__CAPGO_KEEP_0__ Android Studio. iOSではMacが必要で、Xcodeをインストールする必要があります。 Xcode.
次に、 webDir コンテキスト:Capacitorへの移行のステップ2のHTMLテキストのフラグメント (親キー`solutions_cordova_to_capacitor_ai_step2_body`). ページ/エリア:Capgoのソリューションズマーケティングページ。ロール:ウェブサイトのコピー文。ページソリューションズ/コルダボアトキャパシタリアストロ. メッセージキー`solutions_cordova_to_capacitor_ai_step2_body` (ソリューションズコルダボアトキャパシタリアステップ2ボディ) capacitor.config.json __CAPGO_KEEP_0__.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ビルドコマンドを実行し、プロジェクトを__CAPGO_KEEP_0__と同期してください。 npm run build コマンドは、React.jsプロジェクトをビルドし、 npx cap sync は、ウェブcodeを正確な場所に配置することで、ネイティブプラットフォームで実行できるアプリを準備します。
今、少しばかり運が良くエラーも出なければ、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でも同じことが可能です。 ですが、モバイルデバイス上で実行する場合!
ローカルホストで実行しているアプリケーションにライブリロード機能を付与するには、Capacitorアプリが特定のURLからコンテンツを読み込むように設定する必要があります。
最初に、ローカルIPアドレスを決定する必要があります。Macの場合、ターミナルで ipconfig getifaddr en0 を実行してください。Windowsの場合、 ipconfig を実行し、IPv4アドレスを確認してください。
この手順を実行した後、Capacitorをサーバーから直接読み込ませるように設定する必要があります。ファイルのパラメータに capacitor.config.ts を追加してください。IPアドレスとポート番号を正確に指定してください。次に
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;を実行して、ネイティブプロジェクトに変更を反映してください。 npx cap copy アプリケーションを再度Android StudioまたはXcodeでデプロイすると、Reactアプリケーション内の変更が自動的にリロードされ、表示されます!
__CAPGO_KEEP_0__
新しいプラグインがインストールされた場合、例えばカメラなど、ネイティブプロジェクトを再構築する必要があります。これは、ネイティブファイルが変更されたため、オンザフライで更新することができません。
Capacitor プラグインの使用
Capacitor プラグインを使用する方法を簡単に説明します。簡単なものをインストールしてみましょう。 シェア プラグイン、ネイティブのシェアダイアログを提示します。
npm i @capacitor/share使用するには、パッケージをインポートし、関連する share() 関数を呼び出してください。App.js 新しいプラグインをインストールした後、再度Reactプロジェクトを同期してください。:
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;次に、iOSとAndroidでネイティブのフィーリングを実現する__CAPGO_KEEP_0__ナビゲーションとトランジション、また、水平オーバーフローまたは安全エリアがカットされたiOSレイアウトの問題を解決できます。 npx cap sync.
ネイティブのUIを作成するCapgoナビゲーションとトランジション
Native-feeling UI with Capgo Native Navigation and Transitions
__CAPGO_KEEP_0__ ReactとCapacitorを使用したモバイルアプリの作成 クロスプラットフォームアプリを構築するためにIonicを使用しますが、Reactと統合することはハック的で、すでに持っている場合にあまりにも価値がないことが多いため Tailwind CSS.
For a native mobile feel in a React + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:
- @capgo/capacitor-native-navigation —ネイティブのナビゲーションバー、iOSのLiquid Glassタブバー、Androidのブラーされたタブバー
- @capgo/capacitor-transitions —IonicスタイルのページトランジションとiOSのエッジスワイプバック、WebViewレイヤー内で、Ionic UIを採用することなく
両方をインストールする
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncネイティブナビゲーションをCSSのインセットモードで構成して、Webコンテンツがネイティブバーを尊重するようにする
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});液体ガラスのタブバーをレンダリングする(iOSはシステムが所有するレンダリングを使用し、AndroidはブラーされたWebViewのバックグラウンドを使用)
await NativeNavigation.setTabbar({
selectedId: 'home',
labelVisibilityMode: 'labeled',
icons: true,
colors: { dynamic: true },
tabs: [
{ id: 'home', title: 'Home', icon: { svg: '...' } },
{ id: 'settings', title: 'Settings', icon: { svg: '...' } },
],
});
await NativeNavigation.addListener('tabSelect', ({ id }) => {
navigate(`/${id}`);
});ネイティブページトランジションをアプリシェルに追加する
import { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/react';
initTransitions({ platform: 'auto' });
export function AppShell() {
const navigate = useNavigate();
const outletRef = useRef<HTMLElement>(null);
useEffect(() => {
if (outletRef.current) {
setupRouterOutlet(outletRef.current, { platform: 'auto', swipeGesture: 'auto' });
}
}, []);
const openSettings = () => {
setDirection('forward');
navigate('/settings');
};
return <cap-router-outlet ref={outletRef}>{/* routes */}</cap-router-outlet>;
}ページをルーティングする前に Wrap cap-router-outlet, cap-page, そして cap-content, そして呼び出す setDirection('forward') または setDirection('back') Cloudflare
Capacitor Using @capgo/capacitor-native-navigation Capgo Using @capgo/capacitor-transitions.
API
SDK @capgo/tailwind-capacitor （公開されたものとして」 tailwind-capacitor npmで公開 safe-areas Capacitorで提供される
bun add -D tailwind-capacitor__CAPGO_KEEP_0__フレンドリーな src/index.css:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";In pt-safe, pb-safe利用可能な px-safe 、 env(safe-area-inset-*) 代わりに open a PR on GitHub.
プロジェクトは、開発が活発に進んでいます。何かが不足している場合、
__CAPGO_KEEP_0__にPRを開く overflow-x: hidden iOSレイアウトの問題を修正する（ビューポート、セーフエリア、水平オーバーフロー）
ビューポートメタタグの適用を確認してください
ビューポートメタタグを追加してください index.html 内部 <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />iOSセーフエリアを1つのルートラッパーからのみ処理する
単一のアプリシェルを作成し、セーフエリアのパディングをそこに適用してください — 複数のネストされたコンポーネントに適用するのではなく
html,
body,
#root {
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
* {
box-sizing: border-box;
}
.app-shell {
min-height: 100dvh;
width: 100%;
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
}すべてのページコンテンツを内部 .app-shellにラップしてください。
セーフエリアのパディングが複数のヘッダー、モーダル、レイアウトラッパーに重複して適用されている場合、UIが切り取られたり大きすぎるように見えることがよくあります。 @capgo/tailwind-capacitor@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ pt-safe pb-safe px-safe とともに、単一のシェルにパディングを表現するようにすることができます。
Capacitor iOS contentInset に never 最初
In capacitor.config.ts, 自然なインセットを無効にして、CSS (またはネイティブナビゲーションの) contentInsetMode: 'css'を使用します。
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'build',
ios: {
contentInset: 'never',
},
};Capacitorの自動コンテンツインセットとCSSのパディングを組み合わせると、ダブルスペースが原因となる一般的な問題です。 env(safe-area-inset-*) 実際にオーバーフローしている要素を見つける
通常の原因は、
, Tailwind 100vw, 固定ピクセル幅、または大きい w-screenSafari Web インスペクターで実行: min-width.
Safari Web インスペクターで実行してください:
[...document.querySelectorAll('*')]
.filter(el => el.scrollWidth > document.documentElement.clientWidth)
.map(el => ({
el,
tag: el.tagName,
class: el.className,
scrollWidth: el.scrollWidth,
clientWidth: document.documentElement.clientWidth,
}));Tailwindを使用すると、代わりに w-screen 可能な限り w-full 水平方向のオーバーフロー問題の多くは、 100vw / w-screen安全なエリアの重複したパディング、または固定幅のコンテナから来ています — それ自体のビューポートメタタグではなく。
結論
Capacitorは既存のWebプロジェクトに基づいてネイティブアプリを構築するためのシームレスな手段を提供し、codeを共有し、UIが一貫した簡単な方法を提供します。
Capacitorなどの技術により、React.js Webアプリからモバイルアプリを構築することは今までに簡単にありません。Web開発スキルを高め、インプレッシブなネイティブモバイルアプリを作成しましょう。ハッピーコーディング!
__CAPGO_KEEP_0__についてさらに詳しく知りたい場合は、 無料アカウントに登録して 今日から始めましょう。
Building Mobile Apps with Pure React.jsとCapacitorから続きましょう。
__CAPGO_KEEP_0__を使用している場合 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-video-player、 capgo/capacitor-native-navigationを使用する
