next

Edit

Building For TV Devices

React Native аппликейшныг Apple TV болон Android TV дээр ажиллуулах зорилгоор TV төхөөрөмж дэмждэг болгосон байгаа. Тухайн аппликейшны Javascript кодонд цөөн өөрчлөлт хийх эсвэл бүр огт өөрчлөхгүйгээр ажиллуулах боломжтой.

RNTester апп нь Apple TV-ыг дэмждэг; tvOS-д зориулж хийхийн тулд RNTester-tvOS ашиглана уу.

Өөрчлөлтийг нэгтгэх

  • Native layer: React Native Xcode төслүүд нь одоо бүгд '-tvOS' гэсэн стрингээр төгссөн Apple TV файл ажиллуулдаг болсон.

  • react-native init: react-native init-аар хийгдсэн React Native шинэ төслүүд автоматаар XCode төсөл дотроо Apple TV файлтай байна.

  • JavaScript layer: Platform.ios.js дээр Apple TV дэмждэг болсон. Та AppleTV дээр код ажиллаж байгаа эсэхийг доорх маягаар шалгана:

var Platform = require('Platform');
var running_on_tv = Platform.isTV;

// If you want to be more specific and only detect devices running tvOS
// (but no Android TV devices) you can use:
var running_on_apple_tv = Platform.isTVOS;

Өөрчлөлтийг нэгтгэх

  • Native layer: Android TV дээр React Native төслийг ажиллуулахын тулд AndroidManifest.xml дээр доорх өөрчлөлтийг хийнэ үү.
  <!-- 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>
  • JavaScript layer: Platform.android.js нь Android TV дэмждэг болсон. Код нь Android TV дээр ажиллаж байгаа эсэхийг шалгахын тулд:
var Platform = require('Platform');
var running_on_android_tv = Platform.isTV;

Код өөрчлөлт

  • General support for tvOS:Apple TV-ын натив код дахь тодорхой өөрчлөлтүүд нь TARGET_OS_TV-т байгаа. Үүнд tvOS дэмждэггүй API-уудыг хязгаарласан өөрчлөлтүүд (вэб харагдац, слайдерууд, switches, статус цонх г.м) болон TV удирдлага, гар товчлуур дээрээс оруулсан хэрэглэгчийн мэдээлэл дэх өөрчлөлтүүд багтана.

  • Common codebase: tvOS, iOS-уудын Objective-C болон JavaScript ихэнх код адилхан байдаг тул iOS-ын докууд tvOS-тай адилхан байна.

  • Access to touchable controls: Apple TV дээр натив харагдацын класс нь RCTTVView байна. Энэ нь tvOS-ын фокус төхөөрөмжийг ашиглах нэмэлт аргачлалтай. Touchable-т фокусын өөрчлөлтийг таних нэмэлт кодтой ба компонентуудын хэв маягыг зөв гаргах бэлэн аргачлалтай. TV удирдлага ашиглан нэг харагдац сонгоход зохих үйлдлийг эхлүүлдэг. Тэгэхээр TouchableWithoutFeedback, TouchableHighlight болон TouchableOpacity нь зүгээр ажиллана. Нарийвчилбал:

  • Дэлгэцэнд хүрэх хөдөлгөөнтэй харагдацад фокуслах бол onFocus ашиглана

  • Дэлгэцэнд хүрэх хөдөлгөөнтэй харагдацад фокусгүй болвол onBlur ашиглана

  • TV удирдлага дээр "сонгох" товчийг даран дэлгэцэнд хүрэх хөдөлгөөн бүхий харагдац сонгохдоо onPress-ыг ашиглана

  • Access to touchable controls: Android TV дээр ажиллах үед Android framework нь автоматаар таны харагдац дээр фокус хийх элементүүдийн байрлалыг харгалзан навигаци хийх чиглэлийг тодорхойлдог. Touchable mixin нь фокус өөрчлөлтийг таних, компонентын хэв маягийг зөв гаргах, TV удирдлага ашиглан аливаа харагдацыг сонгох үед зохих үйлдлийг хийнэ. Тэгэхээр TouchableWithoutFeedback, TouchableHighlight, TouchableOpacity болон TouchableNativeFeedback нь зүгээр ажиллана. Нарийвчилбал:

    • Дэлгэцэнд хүрэх хөдөлгөөнтэй харагдацад фокуслах бол onFocus ашиглана
    • Дэлгэцэнд хүрэх хөдөлгөөнтэй харагдацад фокусгүй болбол onBlur ашиглана
    • TV удирдлага дээр "сонгох" товчийг даран дэлгэцэнд хүрэх хөдөлгөөн бүхий харагдац сонгохдоо onPress-ыг ашиглана

  • TV remote/keyboard input: RCTTVRemoteHandler гэсэн шинэ натив класс нь TV удирдлагын үйлдэл танигчийг тохируулдаг. TV удирдлагад үйлдэл хийгдэх үед энэхүү класс нь RCTTVNavigationEventEmitter-ын хүлээн авсан сонордуулгыг харуулна (RCTEventEmitter-ын дэд класс). Энэ нь JS эвентийг үүсгэнэ. Энэхүү эвентийг TVEventHandler JavaScript object хүлээн авна. TV удирдлагын үйлдлийг зохицуулах аппликейшны код нь TVEventHandler-ын инстансийг үүсгэх ба доорх кодны дагуу үйлдлийг хүлээн авдаг. TV удирдлагын үйлдлийг зохицуулах аппликейшны код нь TVEventHandler-ын инстансийг үүсгэх ба доорх кодны дагуу үйлдлийг хүлээн авдаг:

  • TV remote/keyboard input: ReactAndroidTVRootViewHelper гэх шинэ натив класс нь TV удирдлагын үйлдлийг зохицуулагчийг тохируулдаг. TV удирдлагад шинэ үйлдэл хийгдэх үед уг класс нь JS event үүсгэдэг. Энэхүү эвентийг TVEventHandler JavaScript объектын инстанс хүлээн авна. TV удирдлагын үйлдлийг зохицуулах аппликейшны код нь TVEventHandler-ын инстансийг үүсгэх ба доорх кодны дагуу үйлдлийг хүлээн авдаг:

var TVEventHandler = require('TVEventHandler');

class Game2048 extends React.Component {
  _tvEventHandler: any;

  _enableTVEventHandler() {
    this._tvEventHandler = new TVEventHandler();
    this._tvEventHandler.enable(this, function(cmp, evt) {
      if (evt && evt.eventType === 'right') {
        cmp.setState({board: cmp.state.board.move(2)});
      } else if(evt && evt.eventType === 'up') {
        cmp.setState({board: cmp.state.board.move(1)});
      } else if(evt && evt.eventType === 'left') {
        cmp.setState({board: cmp.state.board.move(0)});
      } else if(evt && evt.eventType === 'down') {
        cmp.setState({board: cmp.state.board.move(3)});
      } else if(evt && evt.eventType === 'playPause') {
        cmp.restartGame();
      }
    });
  }

  _disableTVEventHandler() {
    if (this._tvEventHandler) {
      this._tvEventHandler.disable();
      delete this._tvEventHandler;
    }
  }

  componentDidMount() {
    this._enableTVEventHandler();
  }

  componentWillUnmount() {
    this._disableTVEventHandler();
  }

  • Dev Menu support: Симулятор дээр cmd-D нь iOS дээрх шиг хөгжүүлэгчийн цэсийг гаргаж ирнэ. Жинхэнэ Apple TV төхөөрөмжийг гаргахын тулд удирдлага дээр тоглуулах/зогсоох товчийг удаан дарах хэрэгтэй. (Apple TV төхөөрөмжийг сэгсрээд хэрэггүй. Энэ нь ямар ч үр дүнгүй)

  • TV remote animations: RCTTVView натив код нь хэрэглэгч өөр өөр харагдацыг гаргах гүйлгэх үед нүдийг чиглүүлэх Apple-аас санал болгодог parallax анимейшныг ажиллуулдаг. Анимейшныг идэвхгүй болгох эсвэл өөрчлөх боломжтой.

  • Back navigation with the TV remote menu button: BackHandler компонент нь Android-ын буцах товчийг дэмжих зорилготой байсан бол одоо TV удирдлагын цэсний товчийг ашиглан Apple TV дээр навигаци хийх боломжтой болсон.

  • TabBarIOS behavior: TabBarIOS компонент нь натив UITabBar API-ыг ажиллуулдаг ба энэ Apple TV дээр арай өөр байдаг. tvOS дээр таб-ыг дахин рендэр хийхэд төвөг гарахаас сэргийлэхийн тулд (асуудал гэснийг уншина уу) сонгосон таб дээр зүйл нь анхны рендэр хийх Javascript-ээр тодорхойлогддог бөгөөд хэрэглэгч натив код ашигласны дараа удирддаг болгож болно.

  • Dev Menu support: Симулятор дээр cmd-M нь Android дээрх шиг хөгжүүлэгчийн цэсийг гаргана. Жинхэнэ Android TV төхөөрөмжийг гаргаж ирэхийн тулд удирдлага дээрх ухраах товчийг удаан дарна. (Apple TV төхөөрөмжийг сэгсрээд хэрэггүй. Энэ нь ямар ч үр дүнгүй)

  • Known issues:

    • ListView scrolling. ListView болон ижил төстэй компонент доторх removeClippedSubviews-ыг false болгож өөрчилснөөр энэ асуудлыг шийдэх боломжтой. Энэ тухай илүү дэлгэрэнгүй уншихыг хүсвэл
      PR гэснийг харна уу.

  • Known issues:

    • InputText компонент нь одоогоор ажиллахгүй байгаа (фокус хүлээн авахгүй).
← Бэлэн апптай нэгтгэхТөхөөрөмж дээр ажиллуулах →