直到使用ReactNative开始运行BlankAndroidTV应用程序为止

2 年 ago

宇, 华

2 minutes

Ateam 生活方式附带日历 2019 的第19天是由 Ateam 生活方式汽车部门的 @mziyut 负责。

由于最近购买的电视是基于Android TV的，因此我尝试了一下在0.55版本以后，使用React Native开发Android TV应用的功能。顺便一提，截至2019年12月16日，最新版本是v0.61.5。

React Native 是什么

简单来说，这是基于Facebook开发的React的原生应用程序框架。

安卓电视是什么？

简单地说，它是由Google提供的面向智能电视的平台。

这次使用的环境

$ sw_vers
ProductName: Mac OS X
ProductVersion: 10.14.4
BuildVersion: 18E226

$ node -v
v10.16.3

准备开发React Native

AndroidStudio和CocoaPods等等是在创建项目时需要准备的，所以请提前准备好。

首先，创建一个React Native的项目。
这次我们将项目命名为“react_native_androidtv”。
由于需要花费时间，所以请耐心等待。

npx react-native init react_native_androidtv

               ######                ######
             ###     ####        ####     ###
            ##          ###    ###          ##
            ##             ####             ##
            ##             ####             ##
            ##           ##    ##           ##
            ##         ###      ###         ##
             ##  ########################  ##
          ######    ###            ###    ######
      ###     ##    ##              ##    ##     ###
   ###         ## ###      ####      ### ##         ###
  ##           ####      ########      ####           ##
 ##             ###     ##########     ###             ##
  ##           ####      ########      ####           ##
   ###         ## ###      ####      ### ##         ###
      ###     ##    ##              ##    ##     ###
          ######    ###            ###    ######
             ##  ########################  ##
            ##         ###      ###         ##
            ##           ##    ##           ##
            ##             ####             ##
            ##             ####             ##
            ##          ###    ###          ##
             ###     ####        ####     ###
               ######                ######


                  Welcome to React Native!
                 Learn once, write anywhere

✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing CocoaPods dependencies (this may take a few minutes)

  Run instructions for iOS:
    • cd /Users/mziyut/Workspace/github.com/mziyut/react_native_androidtv && npx react-native run-ios
    - or -
    • Open react_native_androidtv/ios/react_native_androidtv.xcworkspace in Xcode or run "xed -b ios"
    • Hit the Run button

  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd /Users/mziyut/Workspace/github.com/mziyut/react_native_androidtv && npx react-native run-android

启动 (qǐ

由于创建了Blank项目，我们会进行确认，直到能够启动为止。

这次是针对Android的，所以会执行以下命令，这些命令在创建项目时已经显示出来。

$ cd /Users/mziyut/Workspace/github.com/mziyut/react_native_androidtv && npx react-native run-android

我确认它已经启动了。

更改Android TV的选项。

让我们修改设置以便能够在 Android TV 上进行构建。
需要更改 AndroidManifest.xml 的一部分。

※1

  <!-- Add custom banner image to display as Android TV launcher icon -->
 <application
  ...
  android:banner="@drawable/tv_banner"
  >
    ...
    <intent-filter>
      ...
      <!-- Needed to properly create a launch intent when running on Android TV -->
      <category android:name="android.intent.category.LEANBACK_LAUNCHER"/>
    </intent-filter>
    ...
  </application>

新增虚拟设备

点击「创建虚拟设备」。

选择AndroidTV并点击“下一步”。

当你按下“下一步”按钮时，虚拟设备顺利创建成功。

让我们启动吧

先前已经启动的虚拟设备停止后，重新进行构建。

$ cd /Users/mziyut/Workspace/github.com/mziyut/react_native_androidtv && npx react-native run-android

概括起来

在AndroidTV上，使用ReactNative构建的应用程序得到了支持，可以以较少的配置来构建和启动应用。然而，Android开发者官方文档中提到了有关电视应用程序质量的内容。

重要：为了实现出色的用户体验，电视端的应用程序必须符合特定的可用性要求。
只有符合以下质量标准的应用程序才能在Google Play上被认可为Android TV应用。

为了消除与遥控器操作的设置以及与用户界面相关的限制，我们需要进行许多额外的实现。(同样地，对于AppleTV应用程序也有同样的要求)。

因此，在决定着手使用React Native开发智能电视应用之前，我认为最好先整理所需的实施内容，然后再做判断。

我只是进行了一些构建操作，但我已经将 mziyut/react_native_androidtv 推送到了 Github 上。

最后

Ateam 生活方式冒险日历2019，第20天由 @mgmg121 主持！！非常期待他会写什么样的文章！

请阅读以上内容

※1) https://facebook.github.io/react-native/docs/building-for-apple-tv