Advertisement
  1. Code
  2. React

Cara Membuat Pembaca Berita Dengan React Native: Komponen Halaman Web

Scroll to top
This post is part of a series called How to Create a News Reader With React Native.
How to Create a News Reader With React Native: Setup and News Item Component

Indonesian (Bahasa Indonesia) translation by Andy Nur (you can also view the original English article)

Di bagian pertama dari seri ini, kamu belajar cara menyiapkan React Native di komputermu, membuat dan menggunakan komponen khusus, dan menggunakan pustaka pihak ketiga, seperti moment.js. Pada tutorial ini, kamu belajar cara membuat permintaan jaringan menggunakan fetch, merender halaman web menggunakan komponen WebView bawaan, dan menjalankan aplikasi pada perangkat fisik.

1. Mengambil Pembungkus API

Pada bagian pertama dari seri ini, kita menggunakan fungsi api, tetapi kita belum mendefinisikannya. Mulailah dengan membuat direktori src dan tambahkan file ke dalamnya, api.js. Buka file dan tambahkan yang berikut ini:

File ini menggunakan fungsi fetch, yang mana secara default memang tersedia di React Native. Fungsi ini memungkinkan aplikasi untuk melakukan permintaan jaringan. Jika kamu telah menggunakan jQuery, hal ini cukup mirip dengan fungsi $.ajax. Kamu menentukan URL dan beberapa data opsional, dan kamu mendapatkan response kembali.

Satu-satunya perbedaan adalah bahwa Anda perlu untuk melakukan sedikit pekerjaan tambahan. Fungsi untuk menangkap pertama janji kembali respons mentah, yang berarti bahwa Anda harus memanggil metode json pada respon untuk mendapatkan janji yang mengembalikan JSON string. Jadi Anda harus mengembalikan hasil dari ini dan menangkap janji dengan memanggil fungsi kemudian sekali lagi dan lulus dalam fungsi yang akan dipanggil sekali janji menyelesaikan.

JSON string akan diteruskan sebagai argumen ke fungsi ini sehingga kami kembali. Metode mengambil kembali janji begitu ketika kita memanggil metode api, kita masih harus memanggil metode kemudian untuk menangkap respon sebenarnya, seperti yang kami lakukan dalam bagian pertama dari seri ini.

2. Komponen WebPage

Komponen halaman web bertanggung jawab untuk render halaman web. Menggunakan komponen WebView untuk melakukannya.

Pertama, kami melakukan beberapa rumah tangga dengan menciptakan variabel-variabel yang kita butuhkan dan memerlukan Perpustakaan kita akan menggunakan.

Selanjutnya, kita buat komponen WebPage.

Kita tetapkan isLoading menjadi true sebagai state default. Properti ini bertanggung jawab untuk menentukan apakah atau tidak untuk menunjukkan pemintal. Secara default, pemintal harus terlihat untuk menunjukkan bahwa halaman sedang loading.

Selanjutnya, kita membuat komponen. Seperti komponen item berita, satu ini juga memiliki sebuah header dan tubuh. Header berisi tombol kembali, judul halaman, dan pemintal.

Tubuh berisi komponen WebView. Komponen WebView memiliki atribut url dan onNavigationStateChange. Url adalah URL yang lulus dari fungsi viewPage dalam komponen NewsItems sebelumnya. Jadi, ketika dijalankan kode berikut:

Metode renderScene dalam index.android.js juga akan dijalankan dan URL dilewatkan ke:

Itu adalah bagaimana kita memiliki akses ke URL dengan mengekstrak dari alat peraga: this.props.url.

Mari kita kembali ke atribut ditambahkan ke komponen WebView. Kami memiliki atribut onNavigationStateChange, yang digunakan untuk menentukan fungsi untuk melaksanakan setiap kali tampilan web menavigasi ke halaman baru. Ini adalah apa yang berfungsi seperti:

Ketika fungsi di atas disebut, navState melewati sepanjang sebagai argumen. Ini berisi informasi tentang keadaan saat ini tampilan web, seperti judul laman dan apakah atau tidak itu saat ini memuat. Ini adalah tempat yang sempurna untuk memperbarui negara. Ketika halaman tidak lagi loading, kita mengatur isLoading ke false dan mengatur nilai pageTitle.

Selanjutnya, kami memiliki fungsi kembali, yang membuat navigator kembali satu halaman. Ini dipanggil setiap kali pengguna menyentuh tombol kembali di header.

Fungsi truncate batas panjang apa pun dilewatkan ke fungsi. Kami menggunakan fungsi ini untuk membatasi teks untuk judul halaman dari halaman web.

Stylesheet seperti ini:

Terakhir, mengekspos komponen untuk dunia luar:

3. menjalankan App

Untuk menjalankan aplikasi, Anda memerlukan perangkat Android atau sebuah emulator. Jika Anda ingin menggunakan sebuah emulator, saya sarankan menggunakan Genymotion. Anda dapat menjalankan app dengan menjalankan perintah berikut:

Perintah ini akan menginstal dan meluncurkan app. Tapi Anda akan mendapatkan error berikut jika Anda mencoba untuk melakukannya:

Running the AppRunning the AppRunning the App

Hal ini karena bereaksi asli mengharapkan bereaksi server berjalan pada mesin Anda. Server bereaksi mengkompilasi aplikasi setiap kali Anda Simpan perubahan dalam editor teks Anda. Perintah dijalankan-android bereaksi-asli hanya digunakan untuk menjalankan aplikasi untuk pengujian dan debugging app. Itulah sebabnya mengapa hal ini tergantung pada server bereaksi untuk benar-benar menyusun app.

Untuk menyingkirkan kesalahan, Anda perlu menjalankan perintah mulai bereaksi-asli untuk memulai server. Ini membutuhkan waktu pada hari pertama menjalankan, tapi ketika mendapat bagian mana dikatakan sebagai berikut:

Anda dapat membuka jendela terminal baru pada direktori proyek Anda dan melaksanakan adb shell masukan keyevent 82. Ini akan membuka menu pengembang di perangkat atau emulator. Setelah membuka menu, pilih pengaturan dev kemudian pilih debug server host & port.

Ini akan membuka sebuah prompt yang meminta Anda untuk memasukkan alamat ip dan port dari komputer Anda. Mengetahui internal alamat IP komputer Anda dan memasukkannya dalam prompt dengan port 8081, yang adalah port default yang bereaksi server berjalan. Dengan kata lain, jika alamat IP-mu adalah 192.168.254.254, masukkan 192.168.254.254:8081.

Setelah itu, kembali ke pengembang menu dan pilih reload JS. Ini memuat aplikasi sehingga mendeteksi menjalankan bereaksi server misalnya. App bagaimana harus bekerja tanpa masalah.

Jika Anda ingin menguji pada perangkat iOS, kemudian ikuti panduan situs web asli bereaksi.

4. langkah selanjutnya

Kami telah membangun sebuah aplikasi pembaca berita yang cukup rapi dengan bereaksi asli. Apakah berikutnya? Berikut adalah beberapa ide jika Anda ingin mempelajari lebih lanjut tentang bereaksi asli:

  • Memperbaiki kode dengan menghancurkan app beberapa komponen dapat digunakan kembali yang lain. Mulai dengan melihat kode diduplikasi. Sebagai contoh, di app bahwa kita diciptakan, kami telah diduplikasi header dan komponen di dalamnya. Apa yang dapat Anda lakukan adalah membuat komponen header yang menerima gelar sebagai properti dan kemudian menuntut hal itu pada setiap halaman di mana Anda perlu sebuah header.
  • Meningkatkan waktu respons dari app dengan menciptakan sebuah server yang cache item dari Hacker News API. Hal ini memungkinkan Anda untuk melakukan hanya satu permintaan jaringan yang berisi semua item berita tanpa perlu melakukan beberapa jaringan permintaan seperti yang kami lakukan dalam tutorial ini.
  • Menghasilkan APK ditandatangani sehingga Anda dapat mendistribusikan app di Google Play. Untuk iOS, Anda dapat menggunakan Xcode untuk mendistribusikan aplikasi Anda ke Apple App Store.
  • Jelajahi dokumentasi api yang mengakses kemampuan perangkat asli, seperti kamera.
  • Periksa mengagumkan bereaksi asli repo pada Github. Repo yang berisi daftar komponen, sumber daya dan alat-alat yang dapat Anda gunakan dengan bereaksi asli.
  • Jika Anda ingin untuk menjaga diri diperbarui dengan berita tentang bereaksi asli, kemudian berlangganan Newsletter asli bereaksi.

Kesimpulan

Itu dia. Dalam tutorial ini, Anda belajar bagaimana bekerja dengan bereaksi asli untuk menciptakan sebuah aplikasi pembaca berita yang berbicara ke Hacker News API. Jika Anda memiliki pertanyaan, menjatuhkan mereka di komentar di bawah ini dan saya akan mencoba yang terbaik untuk menjawabnya. Anda dapat menemukan source file tutorial ini pada GitHub. Terima kasih untuk membaca.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.