如果您正在阅读本文,您可能熟悉电视应用程序开发的复杂性和碎片化,并且像我们一样,您已经转向 React Native 作为解决方案。这是 React Native 的一个令人兴奋的用例,社区在这个领域取得了重大进展 - 最值得注意的是,Expo 今年早些时候在 Expo SDK 50 中引入了电视支持。
受到我们自己的经历(和挣扎?)的启发,我们决定创建一个关于使用 React Native for TV 的综合指南。
由于使用 React Native 框架(例如 Expo)现在是创建新应用程序的推荐方法,因此我们的指南重点关注这一点。然而,在我们发布后的讨论中,我们意识到仍然有开发人员想知道如何为电视建立一个裸 React Native (RN) 项目。这就是为什么本文将探讨如何设置裸 RN 项目,并扩展如何设置项目以针对多个平台进行构建。
开始 TV 开发有两种不同的方式:Expo 和 Bare React Native。您在这些方法之间的选择将取决于多个因素,例如项目复杂性、性能需求以及您所针对的特定电视平台。
Expo 通过降低设置开发环境的复杂性,提供了一种更快的电视应用程序开发途径。它为多个平台(网络、电视和移动设备)和预配置的构建流程提供开箱即用的支持。 Expo 非常适合快速入门! ?
您可以在本 Expo 文档或我们指南的“入门”章节中找到更多信息。
另一方面,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 清单
"react-native": "npm:react-native-tvos@latest"
如果没有这个,您的应用程序将无法在 Google Play 上被发现,也不会被识别为安装后出现在系统主屏幕上的电视应用程序(该应用程序只能在“设置”>“应用程序”>“全部”中可见)应用程序。)
<intent-filter> <category android:name="android.intent.category.LEANBACK_LAUNCHER" /> </intent-filter>
<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 清单。
如何构建您的应用程序来处理这个问题?一种选择是将您的项目构建为单一存储库:
查看 Oskar 的文章,了解有关 Yarn 工作区的 monorepo 设置的详细信息。这提供了灵活性,因为我们可以将电视相关代码与移动设备分开,也可以将其扩展到其他电视平台,例如电视平台。 WebOS、Tizen。
针对小型项目的另一种方法使用与模板类似的结构,并在构建风格级别上区分 Android TV 和 Android Mobile 特定功能集,然后通过合并清单。
无论您选择 Expo 路线还是 Bare React Native 方法,为您的应用添加电视支持只需要几个步骤。我们希望这可以帮助您开始电视开发之旅。查看指南,了解使用 React Native 构建 TV 的更多提示和技巧。如果您对书中想要看到的内容有任何疑问或要求,请在下面留言⬇️
以上是如何开发适用于 TV 的 React Native 应用程序的详细内容。更多信息请关注PHP中文网其他相关文章!