이 튜토리얼에서, 새로운 React 앱을 시작하고 Capacitor를 사용하여 네이티브 모바일 개발로 전환할 것입니다. 또한 Capgo Native Navigation 및 Transitions를 추가하여 네이티브 모바일 느낌을 제공하고 tailwind-capacitor를 사용하여 안전한 영역을 사용할 수 있습니다.
Capacitor는 React 웹 애플리케이션을 네이티브 모바일 앱으로 쉽게 변환할 수 있는 기능을 제공하며, 이는 네이티브 모바일 앱을 개발하는 데 필요한 수정 사항이나 새로운 기술을 배우지 않아도 됩니다.
With just a few simple steps, most React applications can be transformed into mobile apps.
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.
Capacitor에 대해
CapacitorJS는 게임 체이너입니다! __CAPGO_KEEP_0__을 웹 프로젝트에 쉽게 통합할 수 있으며, 웹뷰로 애플리케이션을.wrap하고, native Xcode 및 Android Studio 프로젝트를 생성합니다. 또한 플러그인은 JS 브리지를 통해 카메라와 같은 네이티브 장치 기능에 접근할 수 있습니다.
Capacitor으로, 복잡한 설정이나 steep learning curve가 없이도 훌륭한 네이티브 모바일 앱을 얻을 수 있습니다. API이 얇고 Capacitor의 streamlined 기능은 프로젝트에 쉽게 통합할 수 있도록 해줍니다. 믿을 수 없을 정도로 Capacitor를 사용하여 완전히 기능하는 네이티브 앱을 쉽게 달성할 수 있습니다.
React 앱을 준비하는 중
이 튜토리얼에서 가장 단순한 방법으로 React 애플리케이션을 시작하는 방법을 설명합니다.
npx create-react-app my-app네이티브 모바일 앱을 만들기 위해서는 프로젝트를 export해야 합니다. 따라서 package.json에 export할 수 있는 script를 쉽게 추가해 보겠습니다. export package.json 프로젝트를 export하기 위해 __CAPGO_KEEP_0__를 export하는 script를 package.json에 추가합니다.
{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}이제는 걱정 없이 실행할 수 있습니다. 프로젝트의 루트 폴더에 새로운 폴더를 찾을 수 있습니다. npm run build 이 폴더는 나중에 __CAPGO_KEEP_0__에 의해 사용되지만 현재는 올바르게 설정해야 합니다.
This folder will be used by Capacitor later on, but for now, we must set it up correctly.
Adding Capacitor to Your React App
첫째로, __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 개발 의존성으로 설치하고 프로젝트 내에서 설정합니다. 설정 중에는 이름과 번들 ID에 대한 기본값을 수락하려면 “enter”를 누를 수 있습니다. sync 다음으로, iOS 및 Android 플랫폼에 관련된 패키지를 설치해야 합니다.
마지막으로, 플랫폼을 추가하고 __CAPGO_KEEP_0__는 프로젝트의 루트 폴더에 각 플랫폼에 대한 폴더를 생성합니다: Capacitor CLI You can now run __CAPGO_KEEP_0__ without any worries, and you should be able to spot a fresh out folder at your project’s root.
This folder will be used by __CAPGO_KEEP_0__ later on, but for now, we must set it up correctly.
Adding Capacitor to Your React App
# 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 androidTo package any web app into a native mobile container, we must follow a few initial steps, but afterward it’s as simple as executing a single command. iOS 그리고 Android React 프로젝트의 폴더.
실제로 네이티브 프로젝트입니다!
Android 프로젝트에 접근하기 위해서는 Android Studio를 설치해야 합니다. iOS의 경우 Mac가 필요하고.
Xcode capacitor.config.ts 또한 프로젝트에서 Capacitor.config.ts 파일을 찾으세요. 이 파일에는 동기화 시 사용되는 기본 Capacitor 설정이 포함되어 있습니다. 동기화 시 주의해야 할 것은 웹 디렉토리, 이 경로는 현재 빌드 명령어의 결과로 정확하지 않습니다.
이 문제를 해결하려면 다음을 열어 주세요. capacitor.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을 네이티브 플랫폼의 올바른 위치에同步합니다.
그리고 앱에서 표시되도록 합니다. 또한 Sync 명령어는 네이티브 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로 새로운 플러그인을 설치할 때마다 플러그인을 설치합니다. Capacitor 플러그인 앱을 다시 실행하세요. npx cap sync 이미 완료되었습니다. 이제 기기에서 앱을 확인해 보세요!
네이티브 앱 빌드 및 배포
iOS 앱을 개발하려면
Xcode 설치되어야 하며, Android 앱을 개발하려면 Android Studio 설치되어야 합니다. 또한 앱 스토어에 앱을 배포하려면 iOS에서는 Apple Developer Program에, Android에서는 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 androidAndroid Studio에서 기기와 연결된 앱을 배포하는 것은 쉽습니다. 기기를 연결한 후 앱을 배포할 수 있습니다.
Xcode에서 실제 기기 대신 시뮬레이터에만 앱을 배포하려면 서명 계정을 설정해야 합니다. 만약 이 과정을 처음으로 진행한다면, Xcode는 개발자 프로그램에 등록되어야만 개발자 프로그램을 통해 프로세스를 안내해 줄 것입니다. 그 후에, 연결된 기기에 앱을 실행하기 위해 단순히 플레이 버튼을 클릭하면 됩니다. 여기에는 예시가 있습니다.
성공적으로 React 웹 앱을 모바일 기기에 배포했습니다. 여기에는 예시가 있습니다.
그러나 개발 중에 더 빠르게 이 과정을 수행할 수 있는 방법도 있습니다.
Capacitor Live Reload
이제 모든 현대 프레임워크에서 핫 리로드를 사용해 왔을 것입니다. 좋은 소식은 이 기능을 모바일 기기에 적용할 수 있다는 것입니다. on a mobile device 이것은 최소한의 노력만으로도 가능합니다.
Enable access to your locally hosted application with live reload 네트워크 내에 로컬로 호스팅된 애플리케이션에 대한 접근을 활성화하여 리얼타임 리로드를 사용하세요. Capacitor 앱이 특정 URL에서 콘텐츠를 로드하는 것을 허용합니다.
첫 번째 단계는 로컬 IP 주소를 찾는 것입니다. 맥을 사용하는 경우 터미널에서 다음 명령어를 실행하여 이를 알아낼 수 있습니다:
ipconfig getifaddr en0윈도우에서는 :를 실행하세요.
ipconfig그런 다음 IPv4 주소를 찾으세요.
Capacitor이 서버에서 앱을 직접 로드하도록 지시하려면, 우리의 capacitor.config.ts 파일에 추가 항목을 추가할 수 있습니다.
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명령어는 copy 명령어는 sync하지만 웹 폴더에만 변경 사항을 복사하고 웹 폴더의 구성만 업데이트하고
자연스럽게 native 프로젝트를 업데이트하지 않습니다. Android Studio 또는 Xcode를 통해 앱을 다시 배포할 수 있습니다. 그 후에, React 앱에서 변경 사항을 변경하면 자동으로 앱이 다시 로드
변경 사항을 보여줍니다! 주의해야 할 점은
Note that you should use the correct IP and port in your configuration. The code block above shows the default React port for demonstration purposes.
정확한 IP와 포트를 사용하여 구성해야 합니다. 위의 Capacitor 블록은 데모를 위해 기본 React 포트를 보여주고 있습니다.
Capacitor 플러그인 사용
npm i @capacitor/share__CAPGO_KEEP_0__ 플러그인을 사용하는 방법에 대해 살펴보겠습니다. 이에 대해 몇 번 언급했듯이, 이를 수행하려면 다음과 같은 단순한 플러그인을 설치할 수 있습니다: "There’s nothing fancy about the" 공유 플러그인하지만 그래도 원하는 대로 native share dialog를 열어준다! 이 경우, 우리는 이제 package만 import하고 app에서 function을 호출하면 된다. Let’s 변경 src/App.js를 다음과 같이 바꿔보자. share() 새로운 플러그인을 설치할 때는 sync operation을 수행하고 app을 다시 장치에 배포해야 한다. 이를 수행하려면 다음 명령어를 실행하시길 바랍니다. 버튼을 클릭한 후, native share dialog의 아름다운 모습을 직접 경험할 수 있을 것이다! react-__CAPGO_KEEP_0__-share
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;다음으로, iOS와 Android에서 app이 더 원활하게 작동하도록 __CAPGO_KEEP_0__ 네비게이션과 전환을 사용하고, iOS에서 발생하는 일반적인 레이아웃 문제를 해결할 수 있다. 예를 들어, 수평 방향으로 넘치거나 안전 영역이 잘려서 보이는 문제를 해결할 수 있다.
npx cap syncnative-feeling UI와 __CAPGO_KEEP_0__ Native Navigation and Transitions
Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.
Native-feeling UI with Capgo Native Navigation and Transitions
years with years with cross-platform 애플리케이션을 만들기 위해, React와 통합하는 것은 해시킹되고 거의 가치가 없지만 이미 가지고 있는 경우에만 사용할 가치가 있습니다. Tailwind CSS.
native 모바일 느낌을 React + Capacitor 앱에서 얻으려면 Capgo 플러그인 대신 웹 전용 UI 키트인 Konsta UI를 사용하는 것이 좋습니다.
- @capgo/capacitor-native-navigation — iOS에서 Liquid Glass 탭바, Android에서 흐린 탭바 스타일을 사용하는 네이티브 네비게이션 바, React 라우터가 경로 상태를 유지하고 플러그인이 네이티브 창을 소유합니다.
- @capgo/capacitor-transitions — Ionic UI를 채택하지 않고도 WebView层에서 Ionic-style 페이지 전환과 iOS의 에지 스와이프 백을 사용합니다.
두 개 모두 설치하세요.
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',
},
});Liquid Glass 탭바를 렌더링하세요 (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>;
}페이지를 래핑하세요. cap-router-outlet, cap-page, 그리고 cap-content, 그리고 호출 setDirection('forward') 또는 setDirection('back') 이동하기 전에 중복된 웹 헤더 또는 푸터를 생략합니다.
자세한 설명서를 참조하세요: Capacitor에서 @capgo/capacitor-native-navigation 사용 및 Capacitor에서 @capgo/capacitor-transitions 사용.
Tailwind에서 안전한 영역
Tailwind CSS에서 장치 안전 영역을 사용하려면 @capgo/tailwind-capacitor (__CAPGO_KEEP_0__으로 출판) tailwind-capacitor npm)에 있습니다. 그것은 safe-areas Capacitor-친화적인 Tailwind 플러그인을 포함한 다양한 유틸리티를 제공합니다:
bun add -D tailwind-capacitorIn src/index.css:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";React 애플리케이션에 사용할 수 있는 유틸리티를 사용하세요, pt-safe, pb-safe, px-safe 대신에 env(safe-area-inset-*) 수동으로 open a PR on GitHub.
iOS 레이아웃 문제 (뷰포트, 안전 영역, 가로 스크롤)를 해결하는 방법
iOS에서 콘텐츠가 잘려나가거나-shifted되거나 가로 스크롤이 가능하다면 overflow-x: hidden 뷰포트 태그를 수정하거나
iOS 레이아웃 문제를 해결하는 방법
viewport meta 태그를 추가하세요. index.html 내부 <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />iOS safe area를 한 개의 루트 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가 잘린 것처럼 보이거나 너무 크게 보입니다.
그리고 @capgo/tailwind-capacitor와 같은 유틸리티를 사용하여 동일한 패딩을 표현할 수 있습니다. pt-safe pb-safe px-safe 단일 셸에 적용하세요.
Capacitor iOS contentInset 안전 영역 패딩을 설정하세요. never __CAPGO_KEEP_0__
In capacitor.config.ts, native inset을 비활성화하고 CSS (또는 Native Navigation의 )가 safe area를 관리하도록 하세요. contentInsetMode: 'css'__CAPGO_KEEP_0__의 자동 콘텐츠 inset과 CSS padding을 혼합하는 것은 일반적인 double spacing의 원인입니다.
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-*) 일반적으로 원인은 Tailwind, 고정 픽셀 너비, 또는 큰
Safari Web Inspector에서 실행하세요.
Tailwind의 경우 __CAPGO_KEEP_0__를 대체하세요. 100vw__CAPGO_KEEP_0__ w-screen__CAPGO_KEEP_0__ min-width.
__CAPGO_KEEP_0__
[...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,
}));__CAPGO_KEEP_0__ w-screen With __CAPGO_KEEP_0__ when possible. 많은 가로 방출 문제는 __CAPGO_KEEP_0__ 또는 고정 너비 컨테이너에서 오는 것이 아니라, viewport meta 태그 자체에서 오는 것입니다. w-full __CAPGO_KEEP_0__ 100vw / w-screenConclusion
__CAPGO_KEEP_0__는 기존 웹 프로젝트 기반으로 native 애플리케이션을 빌드하는 데 적합한 옵션입니다. __CAPGO_KEEP_1__를 공유하고 일관된 UI를 유지하는 간단한 방법을 제공합니다.
Capacitor is an excellent option for building native applications based on an existing web project, offering a simple way to share code and maintain a consistent UI.
__CAPGO_KEEP_0__를 React 앱에 추가하는 방법을 배우고 싶다면, 다음 기사를 참조하세요: React와 Capgo를 사용하여 모바일 앱을 빌드하는 것에서 계속하세요.__CAPGO_KEEP_0__를 사용하는 경우
React와 Capgo를 사용하여 모바일 앱을 빌드하는 것
Capacitor
__CAPGO_KEEP_0__ Capacitor CI/CD 자동화 계획을 수립하기 위해 연결하세요. Capgo CI/CD Capgo CI/CD에서 제품 워크플로우를 위해 Capgo 네이티브 빌드 Capgo 네이티브 빌드에서 제품 워크플로우를 위해 Capgo 통합 Capgo 통합에서 제품 워크플로우를 위해 CI/CD 통합 CI/CD 통합 구현 세부 사항에 대해 GitHub 액션 통합 GitHub 액션 통합 구현 세부 사항에 대해
