TV용 React Native 앱을 개발하는 방법

작성자: 아니샤 말데(Anisha Malde), 카롤 라투섹(Karol Latusek)

이 기사를 읽고 계시다면 아마도 TV 앱 개발의 복잡성과 단편성에 익숙하실 것입니다. 그리고 우리처럼 React Native를 솔루션으로 사용하게 되셨을 것입니다. 이는 React Native의 흥미로운 사용 사례로, 커뮤니티가 이 분야에서 상당한 발전을 이루었습니다. 특히 Expo는 올해 초 Expo SDK 50에서 TV 지원을 도입했습니다.

우리 자신의 경험(그리고 어려움?)에서 영감을 받아 TV용 React Native 사용에 대한 포괄적인 가이드를 만들기로 결정했습니다.

이제 Expo와 같은 React Native 프레임워크를 사용하는 것이 새로운 앱을 만드는 데 권장되는 접근 방식이므로 가이드에서는 이에 초점을 맞췄습니다. 그러나 출시 후 논의 중에 우리는 TV용 기본 React Native(RN) 프로젝트를 설정하는 방법을 알고 싶어하는 개발자가 여전히 있다는 것을 깨달았습니다. 이것이 바로 이 기사에서 베어 RN 프로젝트를 설정하는 방법을 살펴보고 여러 플랫폼용으로 빌드하기 위해 프로젝트를 설정하는 방법을 확장하는 이유입니다.

Expo 또는 Bare React Native?

TV 개발을 시작하는 방법에는 Expo와 Bare React Native라는 두 가지 방법이 있습니다. 이러한 접근 방식 중 선택은 프로젝트 복잡성, 성능 요구 사항, 대상으로 삼는 특정 TV 플랫폼 등 여러 요소에 따라 달라집니다.

Expo를 사용하여 TV 앱 구축

Expo는 개발 환경 설정의 복잡성을 줄여 TV 앱 개발을 위한 더 빠른 경로를 제시합니다. 다양한 플랫폼(웹, TV, 모바일)과 사전 구성된 빌드 프로세스에 대한 기본 지원을 제공합니다. Expo는 빠르게 시작하는 데 이상적입니다! ?

시작하는 방법

이 엑스포 문서 또는 가이드북의 '시작하기' 장에서 자세한 내용을 확인할 수 있습니다.

Bare React Native로 TV 앱 구축

반면 Bare React Native는 개발자에게 더 많은 제어권과 유연성을 제공할 수 있습니다. 특정 라이브러리가 필요하거나 고유한 성능 요구 사항이 있는 프로젝트에 이상적입니다.

시작하는 방법

Bare React Native 프로젝트를 시작하는 경우 프로젝트가 TV용으로 구성되었는지 확인하는 가장 쉬운 방법은 React Native 커뮤니티 CLI 템플릿을 사용하는 것입니다.

npx @react-native-community/cli@latest init TVTest --template @react-native-tvos/template-tv

이렇게 하면 React-native-tvos와 Android 및 TvOS에 필요한 모든 구성이 포함된 프로젝트가 생성됩니다.

기존 프로젝트에 TV 지원 추가

기존 React Native 프로젝트가 있고 TV 지원을 추가하려는 경우 이러한 구성을 처리하여 이를 확장하여 TV 앱을 빌드해야 합니다. 위의 템플릿이 이를 처리합니다.

1. package.json 종속성 업데이트

npx @react-native-community/cli@latest init TVTest --template @react-native-tvos/template-tv

이렇게 하면 프로젝트에서 Apple TV 및 Android TV를 지원하는 데 필요한 변경 사항과 함께 React Native, React-native-tvos의 포크를 사용할 수 있습니다.

? 프로젝트에서 이 패키지와 핵심 반응 네이티브 패키지를 동시에 사용할 수는 없지만 포크를 사용해도 '일반' 모바일 빌드를 만드는 데 방해가 되지는 않습니다.

2. Android 매니페스트 업데이트

• Android TV 애플리케이션의 경우 Android 매니페스트 파일에 Leanback 런처를 추가하여 앱이 런처 활동을 선언하는지 확인해야 합니다.

"react-native": "npm:react-native-tvos@latest"

이렇지 않으면 Google Play에서 애플리케이션을 검색할 수 없으며 설치 후 시스템 홈 화면에 나타나는 TV 앱으로 인식되지 않습니다(앱은 설정 > 앱 > 전체에만 표시됩니다). 앱.)

• android.hardware.touchscreen 기능이 필요하지 않으며 앱이 Android TV용으로 제작되었음을 선언합니다.

<intent-filter>
  <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
</intent-filter>

• 앱이 Android TV용으로 제작되었음을 선언하세요.

<uses-feature android:name="android.hardware.touchscreen" android:required="false" />
<uses-feature android:name="android.hardware.faketouch" android:required="false" />

이러한 변경 사항에 대한 자세한 내용은 TV 지원 추가에 대한 Android 문서를 읽어보세요.

? 이러한 변경 사항은 TV 앱의 Android 매니페스트에만 추가하는 것이 좋습니다. 앱이 TV 외에 다른 빌드 플랫폼을 대상으로 하는 경우에도 플랫폼 도메인 기능(예: 터치스크린)이 모바일 빌드에 필요한지 확인하고 싶을 것입니다.

아래에서는 별도의 매니페스트를 갖도록 앱을 구성하는 방법을 설명합니다.

*3. Project.pbxproj 업데이트 *

이에 따라 TVOS 지원을 정의하려면 iOS 프로젝트 파일을 업데이트하세요.

4. Podfile 업데이트

<uses-feature android:name="android.software.leanback" android:required="false" />

이렇게 하면 프로젝트가 tvOS용으로 구성되었는지 확인할 수 있습니다.

추가 TV 플랫폼을 처리하도록 앱 구조화

React Native의 가장 큰 장점 중 하나는 여러 플랫폼에 하나의 코드베이스를 사용할 수 있다는 것입니다. 이는 TV용 빌드를 만드는 경우에도 마찬가지입니다. 그러나 모바일 및 TV 프로젝트에는 별도의 package.json, podfile 및 Android 매니페스트가 필요할 수 있습니다.

이를 처리하도록 앱을 어떻게 구성할 수 있나요? 한 가지 옵션은 프로젝트를 모노레포로 구성하는 것입니다.

Yarn 작업공간을 사용한 모노레포 설정에 대한 자세한 내용은 Oskar의 기사를 확인하세요. 이를 통해 TV 관련 코드를 모바일에서 분리할 수 있고 이를 다른 TV 플랫폼(예: 모바일)으로 확장할 수도 있으므로 유연성이 허용됩니다. WebOS, 타이젠.

소규모 프로젝트를 위한 또 다른 접근 방식은 템플릿과 유사한 구조를 사용하고 빌드 버전 수준에서 Android TV 및 Android 모바일 관련 기능 세트를 차별화한 다음 매니페스트를 병합하는 것입니다.

Expo 경로를 선택하든 Bare React Native 접근 방식을 선택하든 앱에 TV 지원을 추가하려면 몇 단계만 거치면 됩니다. 이것이 TV 개발 여정을 시작하는 데 도움이 되기를 바랍니다. React Native를 사용하여 TV용으로 구축하는 방법에 대한 추가 팁과 요령은 가이드북을 확인하세요. 책에서 보고 싶은 내용이나 궁금한 내용이 있으시면 아래 댓글로 남겨주세요⬇️

위 내용은 TV용 React Native 앱을 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!