Cara membangunkan Apl React Native untuk TV

Oleh Anisha Malde & Karol Latusek

Jika anda membaca artikel ini, anda mungkin sudah biasa dengan kerumitan dan pemecahan pembangunan apl TV, dan seperti kami, anda telah beralih kepada React Native sebagai penyelesaian. Ia merupakan kes penggunaan React Native yang menarik, dengan komuniti mencapai kemajuan yang ketara dalam ruang ini—terutamanya, Expo memperkenalkan sokongan TV dalam Expo SDK 50 awal tahun ini.

Diinspirasikan oleh pengalaman kami sendiri (& perjuangan ?), kami memutuskan untuk mencipta panduan komprehensif untuk menggunakan React Native untuk TV.

Memandangkan menggunakan rangka kerja React Native, seperti Expo, kini merupakan pendekatan yang disyorkan untuk mencipta apl baharu, panduan kami memfokuskan pada perkara ini. Walau bagaimanapun, semasa perbincangan selepas pelancaran kami, kami menyedari masih ada pembangun yang ingin mengetahui cara menyediakan projek React Native (RN) kosong untuk TV. Itulah sebabnya artikel ini akan meneroka cara menyediakan projek RN kosong anda dan mengembangkan cara menyediakan projek anda untuk dibina untuk berbilang platform.

Ekspo atau Bare React Native?

Terdapat dua cara berbeza untuk memulakan pembangunan TV: Ekspo dan Bare React Native. Pilihan anda antara pendekatan ini bergantung pada beberapa faktor seperti kerumitan projek, keperluan prestasi dan platform TV khusus yang anda sasarkan.

Membina Apl TV Dengan Ekspo

Ekspo mempersembahkan laluan yang lebih pantas ke pembangunan aplikasi TV dengan mengurangkan kerumitan menyediakan persekitaran pembangunan anda. Ia menawarkan sokongan luar biasa untuk berbilang platform (web, TV dan mudah alih) dan proses binaan yang diprakonfigurasikan. Ekspo sangat sesuai untuk bermula dengan cepat! ?

Bagaimana untuk bermula

Anda boleh mendapatkan maklumat lanjut dalam dokumentasi Ekspo ini atau bab 'Bermula' dalam buku panduan kami.

Membina Apl TV Dengan Bare React Native

Sebaliknya, Bare React Native boleh menawarkan pembangun lebih kawalan dan fleksibiliti. Ia sesuai untuk projek yang memerlukan perpustakaan tertentu atau mempunyai keperluan prestasi yang unik.

Bagaimana untuk bermula

Jika anda memulakan projek Bare React Native, cara paling mudah untuk memastikan projek anda dikonfigurasikan untuk TV ialah menggunakan templat CLI komuniti React Native:

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

Ini mencipta projek dengan tvos-react-asli dan semua konfigurasi yang diperlukan untuk Android dan TvOS.

Menambah Sokongan TV pada Projek Sedia Ada

Jika anda mempunyai projek React Native sedia ada dan ingin menambah sokongan TV, anda perlu mengendalikan konfigurasi ini untuk melanjutkannya untuk membina apl TV. Ambil perhatian bahawa templat di atas menguruskan perkara ini untuk anda.

1. Kemas kini kebergantungan package.json

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

Ini membolehkan projek anda menggunakan pelbagai React Native, react-native-tvos, dengan perubahan yang diperlukan untuk menyokong Apple TV dan Android TV.

? Anda tidak boleh menggunakan pakej ini dan pakej asli tindak balas teras secara serentak dalam projek namun menggunakan garpu tidak menghalang anda daripada membuat binaan mudah alih 'biasa' anda.

2. Kemas kini Manifes Android

• Untuk aplikasi Android TV, anda perlu memastikan bahawa apl anda mengisytiharkan aktiviti pelancar dengan menambahkan pelancar leanback pada fail manifes Android anda:

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

Tanpa ini, aplikasi anda tidak akan ditemui di Google Play dan ia tidak akan dikenali sebagai apl TV yang muncul pada skrin utama sistem selepas pemasangan (apl itu hanya akan kelihatan dalam Tetapan > Apl > Semua Apl.)

• Isytiharkan bahawa ciri android.hardware.touchscreen tidak diperlukan dan apl anda dibina untuk Android TV:

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

• Isytiharkan bahawa apl anda dibina untuk Android TV:

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

Untuk mendapatkan maklumat lanjut tentang perubahan ini, baca dokumentasi Android tentang menambah sokongan TV.

? Kami mengesyorkan anda menambahkan perubahan ini pada manifes Android apl TV sahaja. Jika apl anda menyasarkan platform binaan yang berbeza sebagai tambahan kepada TV, anda masih mahu memastikan bahawa ciri domain platform, mis., Skrin sentuh diperlukan pada binaan mudah alih.

Kami menerangkan cara anda boleh menstrukturkan apl anda untuk mempunyai manifes berasingan di bawah.

*3. Kemas kini Project.pbxproj *

Kemas kini fail projek iOS untuk menentukan sokongan TVOS mengikut ini.

4. Kemas kini Podfile

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

Ini memastikan projek anda dikonfigurasikan untuk tvOS.

Menstrukturkan Apl Anda untuk Mengendalikan Platform TV Tambahan

Salah satu kelebihan terbesar React Native ialah kemungkinan untuk menggunakan satu pangkalan kod untuk berbilang platform. Ini juga berlaku apabila anda membuat binaan untuk TV. Walau bagaimanapun, projek mudah alih dan TV mungkin memerlukan package.json, podfiles dan manifes Android yang berasingan.

Bagaimanakah anda boleh menstrukturkan apl anda untuk mengendalikan perkara ini? Satu pilihan ialah menstruktur projek anda sebagai monorepo:

Semak artikel Oskar untuk mendapatkan butiran tentang persediaan monorepo dengan ruang kerja Benang. Ini membolehkan fleksibiliti kerana kami boleh memisahkan kod berkaitan TV daripada mudah alih dan juga boleh mengembangkannya ke platform TV lain cth. WebOS, Tizen.

Pendekatan lain untuk projek yang lebih kecil menggunakan struktur yang serupa dengan templat dan membezakan set ciri khusus Android TV dan Android Mobile pada tahap rasa binaan dan kemudian dengan menggabungkan manifes.

Sama ada anda memilih laluan Ekspo atau pendekatan Bare React Native, menambah sokongan TV pada apl anda hanya memerlukan beberapa langkah. Kami berharap ini membantu anda memulakan perjalanan pembangunan TV anda. Semak buku panduan untuk mendapatkan lebih banyak petua dan kiat tentang membina untuk TV menggunakan React Native. Jika anda mempunyai sebarang soalan atau permintaan untuk kandungan yang anda ingin lihat dalam buku, sila tinggalkan komen di bawah ⬇️

Atas ialah kandungan terperinci Cara membangunkan Apl React Native untuk TV. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!