首页 > web前端 > js教程 > 如何开发适用于 TV 的 React Native 应用程序

如何开发适用于 TV 的 React Native 应用程序

Susan Sarandon
发布: 2024-12-21 08:59:10
原创
642 人浏览过

作者:阿尼莎·马尔德和卡罗尔·拉图塞克

如果您正在阅读本文,您可能熟悉电视应用程序开发的复杂性和碎片化,并且像我们一样,您已经转向 React Native 作为解决方案。这是 React Native 的一个令人兴奋的用例,社区在这个领域取得了重大进展 - 最值得注意的是,Expo 今年早些时候在 Expo SDK 50 中引入了电视支持。

受到我们自己的经历(和挣扎?)的启发,我们决定创建一个关于使用 React Native for TV 的综合指南。

How to develop a React Native App for TV

由于使用 React Native 框架(例如 Expo)现在是创建新应用程序的推荐方法,因此我们的指南重点关注这一点。然而,在我们发布后的讨论中,我们意识到仍然有开发人员想知道如何为电视建立一个裸 React Native (RN) 项目。这就是为什么本文将探讨如何设置裸 RN 项目,并扩展如何设置项目以针对多个平台进行构建。

Expo 还是 Bare React Native?

开始 TV 开发有两种不同的方式:Expo 和 Bare React Native。您在这些方法之间的选择将取决于多个因素,例如项目复杂性、性能需求以及您所针对的特定电视平台。

使用 Expo 构建电视应用程序

Expo 通过降低设置开发环境的复杂性,提供了一种更快的电视应用程序开发途径。它为多个平台(网络、电视和移动设备)和预配置的构建流程提供开箱即用的支持。 Expo 非常适合快速入门! ?

如何开始

您可以在本 Expo 文档或我们指南的“入门”章节中找到更多信息。

使用 Bare React Native 构建电视应用程序

另一方面,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 所需的所有配置的项目。

向现有项目添加电视支持

如果您有一个现有的 React Native 项目并想要添加 TV 支持,您需要处理这些配置以扩展它以构建 TV 应用程序。请注意,上面的模板会为您处理此问题。

1。更新 package.json 依赖项

npx @react-native-community/cli@latest init TVTest --template @react-native-tvos/template-tv
登录后复制
登录后复制

这使您的项目能够使用 React Native 的一个分支,react-native-tvos,并进行支持 Apple TV 和 Android TV 所需的更改。

?您不能在项目中同时使用此包和核心 React-Native 包,但是使用 fork 并不会阻止您创建“常规”移动版本。

2。更新 Android 清单

  • 对于 Android TV 应用程序,您需要通过将 Leanback 启动器添加到 Android 清单文件来确保您的应用程序声明启动器活动:
"react-native": "npm:react-native-tvos@latest"
登录后复制

如果没有这个,您的应用程序将无法在 Google Play 上被发现,也不会被识别为安装后出现在系统主屏幕上的电视应用程序(该应用程序只能在“设置”>“应用程序”>“全部”中可见)应用程序。)

  • 声明 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" />

登录后复制

有关这些更改的更多信息,请阅读有关添加电视支持的 Android 文档。

?我们建议仅将这些更改添加到电视应用程序的 Android 清单中。如果您的应用程序除了电视之外还针对不同的构建平台,您仍然需要确保平台域功能,例如移动构建需要触摸屏。

我们在下面解释了如何构建您的应用程序以具有单独的清单。

*3。更新 Project.pbxproj *

根据此更新iOS项目文件以定义TVOS的支持。

4。更新 Podfile

<uses-feature android:name="android.software.leanback" android:required="false" />
登录后复制

这可确保您的项目针对 tvOS 配置。

构建您的应用程序以处理其他电视平台

React Native 的最大优势之一是可以将一个代码库用于多个平台。当您创建电视版本时也是如此。但是,移动和电视项目可能需要单独的 package.json、podfile 和 Android 清单。

如何构建您的应用程序来处理这个问题?一种选择是将您的项目构建为单一存储库:

How to develop a React Native App for TV

查看 Oskar 的文章,了解有关 Yarn 工作区的 monorepo 设置的详细信息。这提供了灵活性,因为我们可以将电视相关代码与移动设备分开,也可以将其扩展到其他电视平台,例如电视平台。 WebOS、Tizen。

针对小型项目的另一种方法使用与模板类似的结构,并在构建风格级别上区分 Android TV 和 Android Mobile 特定功能集,然后通过合并清单。

How to develop a React Native App for TV

无论您选择 Expo 路线还是 Bare React Native 方法,为您的应用添加电视支持只需要几个步骤。我们希望这可以帮助您开始电视开发之旅。查看指南,了解使用 React Native 构建 TV 的更多提示和技巧。如果您对书中想要看到的内容有任何疑问或要求,请在下面留言⬇️

How to develop a React Native App for TV

以上是如何开发适用于 TV 的 React Native 应用程序的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板