In 이 튜토리얼에서, 우리는 새로운 React 앱을 시작하고 __CAPGO_KEEP_0__를 사용하여 네이티브 모바일 개발로 전환할 것입니다. 또한 __CAPGO_KEEP_1__ 네이티브 네비게이션 및 전환을 추가하여 네이티브 모바일 느낌을 주고, tailwind-__CAPGO_KEEP_2__를 사용하여 안전한 영역을 사용할 수 있습니다. React app and transition to native mobile development using Capacitor. You can also add Capgo Native Navigation and Transitions for a native mobile feel, and use tailwind-capacitor for safe areas.
Capacitor를 사용하여 네이티브 모바일 앱으로 변환하는 데 필요한 단계는 매우 간단합니다.
이 튜토리얼에서는 React 앱을 시작하고 __CAPGO_KEEP_0__를 사용하여 네이티브 모바일 앱으로 전환하는 과정을 안내할 것입니다. 또한 __CAPGO_KEEP_1__ 네이티브 네비게이션, 전환, tailwind-__CAPGO_KEEP_2__를 사용하여 안전한 영역을 사용할 수 있습니다.
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. You can also use Capgo Native Navigation, Transitions, and tailwind-capacitor for safe areas.
About Capacitor
__CAPGO_KEEP_0__를 사용하면 복잡한 설정이나 steep 러닝 커브 없이도 네이티브 모바일 앱을 얻을 수 있습니다. __CAPGO_KEEP_1__가 얇고 __CAPGO_KEEP_2__가 streamlined 기능을 제공하여 프로젝트에 쉽게 통합할 수 있습니다. 믿어도 됩니다. __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!
__CAPGO_KEEP_0__는 CapacitorJS의 약자입니다.
이 튜토리얼에서 가장 단순한 방법으로 React 애플리케이션을 시작하는 방법에 대해 설명합니다.
npx create-react-app my-appnative 모바일 앱을 만들기 위해서는 프로젝트의 export 을 필요로 합니다. 따라서 package.json에 단순한 스크립트를 포함하여 React 프로젝트를 빌드하고 export 할 수 있도록 하겠습니다.
{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}이제는 걱정 없이 npm run build 을 실행할 수 있습니다. 그리고 프로젝트의 루트 폴더에 새로운 폴더가 생성되어야 합니다.
이 폴더는 나중에 Capacitor에 의해 사용될 것입니다. 하지만 현재는 올바르게 설정해야 합니다.
Capacitor를 React 애플리케이션에 추가하기
웹 애플리케이션을 native 모바일 컨테이너로 패키징하기 위해서는 몇 가지 초기 단계를 따르야 하지만, 그 이후로는 단순히 하나의 sync command
첫째로, 우리는 Capacitor CLI 를 개발 의존성으로 설치하고 프로젝트 내에서 설정할 수 있습니다. 설정 중에 이름과 번들 ID의 기본값을 수락하려면 “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이 시점에서, iOS와 Android 폴더가 React 프로젝트 내에 생성되어야 합니다. 이것은 실제 네이티브 프로젝트입니다! Android 프로젝트에 접근하려면 __CAPGO_KEEP_0__ 를 설치해야 합니다.
Those are real native projects!
ios 안드로이드 스튜디오. iOS에서는 Mac가 필요하고 Xcode를 설치해야 합니다. 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 이 문제를 해결하려면 __CAPGO_KEEP_0__.config.json:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "out",
"bundledWebRuntime": false
}이것을 시도하려면 다음 명령어를 실행하세요:
npm run build
npx cap sync첫 번째 명령어 npm run build 은 단순히 React 프로젝트를 빌드하고 정적 빌드를 내보냅니다.
두 번째 명령어 npx cap sync 은 모든 웹 code을 올바른 위치에 동기화하여 앱에서 표시할 수 있도록 합니다.
또한 동기화 명령어는 네이티브 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로 새로운 Capacitor plugins 을 다시 실행해야 합니다. npx cap sync 이것을 알아채지 못한 채로 이제 실제로 완료되었습니다. 따라서 장치에서 앱을 보러 가 봅시다!
자연스럽게 네이티브 앱을 빌드하고 배포하세요
iOS 앱을 개발하려면
필요한 것입니다. Xcode 설치되어 있어야 하며, 안드로이드 앱을 위해 안드로이드 스튜디오가 설치되어 있어야 합니다. 또한 앱 스토어에 앱을 배포하려면 iOS에는 Apple Developer Program에, 안드로이드에는 Google Play Console에 가입해야 합니다. native 모바일 개발에 새로운 입문자라면 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 사용하여 쉽게 두 개의 네이티브 프로젝트를 열 수 있습니다:
If you’re new to native mobile development, you can use the Capacitor CLI to easily open both native projects:
npx cap open ios
npx cap open android안드로이드 스튜디오에서 앱을 실행하는 방법은 다음과 같습니다.
Xcode에서 앱을 실행하는 방법은 다음과 같습니다.
react-mobile-app
__CAPGO_KEEP_0__ __CAPGO_KEEP_1__
Capacitor Live Reload
모든 현대 프레임워크에서热 재로드를 사용해 오신 분들은 좋은 소식이 있습니다. 모바일 장치에서도 동일한 기능을 사용할 수 있습니다. 최소한의 노력으로!
로컬 호스트 애플리케이션에 대한 접근을 활성화하고 네트워크에서 __CAPGO_KEEP_0__ 앱이 특정 URL에서 콘텐츠를 로드하도록 하세요. 첫 번째 단계는 로컬 IP 주소를 찾는 것입니다. 맥을 사용하는 경우 터미널에서 다음 명령어를 실행하여 이를 알아낼 수 있습니다. by having the Capacitor app load the content from the specific URL.
그런 다음 IPv4 주소를 찾으세요.
ipconfig getifaddr en0__CAPGO_KEEP_0__를 사용하여 서버에서 앱을 직접 로드하도록 지시하려면, 파일에 추가 항목을 추가하세요.
ipconfig__CAPGO_KEEP_0__
Capacitor capacitor.config.ts __CAPGO_KEEP_0__
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이제 Android Studio 또는 Xcode를 통해 앱을 다시 배포할 수 있습니다. 그 후에, React 앱에서 변경 사항이 생기면 앱은 자동으로 다시 로드되고 변경 사항을 표시합니다. copy 이제 이러한 변경 사항을 우리의 네이티브 프로젝트로 복사할 수 있습니다. sync명령어는 이와 유사하지만, 웹 폴더와 설정만 업데이트하고 네이티브 프로젝트를 업데이트하지 않습니다. 이제 Android Studio 또는 Xcode를 통해 앱을 다시 배포할 수 있습니다. 그 후에, React 앱에서 변경 사항이 생기면 앱은 자동으로 다시 로드되고 변경 사항을 표시합니다. 이제 Android Studio 또는 Xcode를 통해 앱을 다시 배포할 수 있습니다. 그 후에, React 앱에서 변경 사항이 생기면 앱은 자동으로 다시 로드되고 변경 사항을 표시합니다.
이제 Android Studio 또는 Xcode를 통해 앱을 다시 배포할 수 있습니다. 그 후에, React 앱에서 변경 사항이 생기면 앱은 자동으로 다시 로드되고 변경 사항을 표시합니다. 이제 Android Studio 또는 Xcode를 통해 앱을 다시 배포할 수 있습니다. 그 후에, React 앱에서 변경 사항이 생기면 앱은 자동으로 다시 로드되고 변경 사항을 표시합니다. 이제 Android Studio 또는 Xcode를 통해 앱을 다시 배포할 수 있습니다. 그 후에, React 앱에서 변경 사항이 생기면 앱은 자동으로 다시 로드되고 변경 사항을 표시합니다.
주의해야 할 점 새로운 플러그인인 카메라를 설치한다면, 여전히 네이티브 프로젝트를 다시 빌드해야 합니다. 이는 네이티브 파일이 변경되었기 때문입니다. 이 작업은 즉시 수행할 수 없습니다.
정확한 IP와 포트를 사용하여 구성해야 합니다. 위의 code 블록은 React 기본 포트를 데모 목적으로 보여주고 있습니다.
Capacitor 플러그인 사용
Capacitor 플러그인을 실제로 사용하는 방법에 대해 살펴보겠습니다. 이에 대해 이전에 언급한 바가 있습니다. 이를 수행하려면 다음과 같은 간단한 플러그인을 설치할 수 있습니다.
npm i @capacitor/share__CAPGO_KEEP_0__ 플러그인은 특별한 기능이 없지만, 그래도 네이티브 공유 대화상자를 열어줍니다. 이에 대해 더 자세히 살펴보겠습니다. 플러그인은 공유 플러그인입니다. 이 플러그인은 특별한 기능이 없지만 그래도 네이티브 공유 대화상자를 열어줍니다.공유 플러그인 share() src/App.js를 다음과 같이 변경합니다: 이전에도 언급한 바와 같이 새로운 플러그인을 설치할 때, 동기화 작업을 수행하고 앱을 다시 배포해야 합니다. 이를 수행하려면 다음 명령어를 실행하세요: 이전에도 언급한 바와 같이 새로운 플러그인을 설치할 때, 동기화 작업을 수행하고 앱을 다시 배포해야 합니다.
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;As mentioned earlier, when installing new plugins, we need to perform a sync operation and then redeploy the app to our device. To do this, run the following command:
npx cap sync버튼을 클릭한 후, 아름다운 네이티브 공유 대화창을 실제로 경험할 수 있습니다!
다음으로, 앱을 iOS와 Android에서 더 네이티브하게 느끼게 하려면 Capgo 네비게이션과 전환을 사용하고, 수평 스크롤이나 안전 영역이 잘려 나가는 문제를 해결할 수 있습니다.
네이티브 느낌의 UI와 Capgo 네이티브 네비게이션 및 전환
수년간 Ionic을 사용하여 크로스 플랫폼 앱을 개발해 왔습니다. Ionic React와 함께 사용하는 Ionic과는 달리, Tailwind CSS와 함께 사용하는 것이 훨씬 더 가독성 좋고 가치 있는 선택입니다. Tailwind CSS.
React + Capacitor 앱에서 네이티브 모바일 느낌을 얻으려면, 웹 전용 UI 키트인 Konsta UI 대신 Capgo 플러그인을 사용하세요.
- @capgo/capacitor-native-navigation — 네이티브 네비게이션 바, iOS에서 Liquid Glass 탭 바, Android에서 흐린 탭 바 스타일. React 라우터는 라우트 상태를 유지하고, 플러그인은 네이티브 창을 관리합니다.
- @capgo/capacitor-transitions — iOS와 Android에서 WebView layer에서 Ionic-style 페이지 전환 및 iOS edge swipe-back을 사용할 수 있습니다. Ionic UI를 채택하지 않습니다.
설치 BOTH:
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncCSS inset 모드를 사용하여 네이티브 바를 존중하는 웹 콘텐츠를 구성하십시오:
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페이지를 wrap하는 cap-contentor setDirection('forward') or setDirection('back') or
or Using @capgo/capacitor-native-navigation 및 @capgo/capacitor-transitions.
Tailwind CSS의 디바이스 안전 영역
Tailwind CSS에서 디바이스 안전 영역을 사용하려면 @capgo/tailwind-capacitor (__CAPGO_KEEP_0__에서 발표) tailwind-capacitor npm에서 제공하는 유용성과 다른 npm-친화 Tailwind 플러그인: safe-areas utilities and other Capacitor-friendly Tailwind plugins:
bun add -D tailwind-capacitorTailwind CSS의 유용성을 사용하여 src/index.css:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";, pt-safe, pb-safe대신 px-safe 및 env(safe-area-inset-*) Capacitor를 사용하여 React 모바일 앱을 만들기 Capgo에서 GitHub 열기.
iOS 레이아웃 문제 해결 (뷰포트, 안전 영역, 가로 스크롤)
iOS에서 콘텐츠가 잘려나거나-shifted 또는 가로 스크롤 가능한 경우, 더 많은 overflow-x: hidden 또는 뷰포트 태그만 조정하는 것으로 문제를 해결할 수 없습니다. 이러한 체크를 순서대로 진행하세요.
뷰포트 메타 태그가 올바르게 적용되었는지 확인하세요
뷰포트 메타 태그를 추가하세요 index.html 내부 <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />iOS 안전 영역을 하나의 루트 wrapper에서 처리하세요
싱글 앱 셸을 만들고 안전 영역 패딩을 적용하세요 — 여러 개의 중첩된 컴포넌트에서 아닙니다:
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안전 영역 패딩이 중복되어 헤더, 모달, 레이아웃 wrapper에서 UI가 잘려나거나 너무 큰 경우가 있습니다.
With @capgo/tailwind-capacitor, __CAPGO_KEEP_0__와 같이 패딩을 표현할 수 있습니다. pt-safe pb-safe px-safe on that single shell.
Capacitor iOS contentInset to never 첫 번째
In capacitor.config.ts, native inset이 비활성화된 것을 선호하고 CSS (또는 Native Navigation의 )가 안전 영역을 관리하도록 합니다. contentInsetMode: 'css'__CAPGO_KEEP_0__의 자동 콘텐츠 인셋과 CSS 패딩을 혼합하는 것은 일반적인 두 배 간격의 원인입니다.
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'dist',
ios: {
contentInset: 'never',
},
};Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) __CAPGO_KEEP_0__
실제로 넘치는 요소를 찾으세요
일반적으로 범인은 픽셀 너비가 고정된 요소 또는 큰 100vw, Tailwind w-screen, 고정된 픽셀 너비 또는 큰 min-width.
Safari Web Inspector에서 실행하십시오:
[...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, 중복된 안전 영역 패딩 또는 고정 너비 컨테이너에서 오는 것이 아니라, viewport meta 태그 자체에서 오는 것입니다.
결론
Capacitor은 기존 웹 프로젝트에 기반한 네이티브 애플리케이션을 빌드하는 데 적합한 옵션입니다. code을 공유하고 일관된 UI를 유지하는 간단한 방법을 제공합니다.
그리고 __CAPGO_KEEP_1__의 추가 Capgo앱에 실시간 업데이트를 추가하는 것이 thậm chí 더 쉬워졌습니다. 따라서 사용자들은 항상 최신 기능과 버그 수정에 접근할 수 있습니다.
다음 기사를 참조하여 React 앱에 Capgo을 추가하는 방법을 배우려면?
Building Mobile Apps with React와 Capacitor에서 계속 진행하세요.
Building Mobile Apps with React와 __CAPGO_KEEP_0__을 사용하여 CI/CD 자동화 계획을 만든다면 __CAPGO_KEEP_0__ CI/CD와 연결하세요. Capacitor CI/CD __CAPGO_KEEP_0__ CI/CD에서 제품 워크플로우 Capgo Native Builds Capgo Native Builds에서 제품 워크플로우 Capgo Integrations for the product workflow in Capgo Native Builds, Capgo Integrations Capacitor 제품 워크플로우에서 Capgo 통합 CI/CD 통합 CI/CD 통합 구현 세부 사항 GitHub 액션 통합 GitHub 액션 통합 구현 세부 사항
