Cara membina aplikasi berita dengan React Native

Untuk catatan pertama saya di Medium, dan saya ingin berkongsi dengan anda bagaimana saya membuat aplikasi berita dengan React Native.

Asalnya disiarkan di blog saya.

Keperluan untuk membina aplikasi:

  • Pemahaman asas mengenai JavaScriptbahasa .
  • Pasang: Node.js, bertindak balas asli menggunakan npm.
  • Perpustakaan digunakan: moment, react-native, react-native-element.

Sekiranya anda tidak biasa dengan sumber-sumber ini, jangan risau - ia cukup mudah digunakan.

Tajuk-tajuk yang akan kita bahas dalam posting adalah:

  • API Berita
  • Ambil API
  • Senarai Flat
  • Tarik ke bawah untuk menyegarkan
  • Menghubung kait

Dan banyak lagi ... jadi mari kita mulakan!

Anda boleh mendapatkan repo projek di sini

API Berita

API yang mudah dan senang digunakan yang mengembalikan metadata JSON untuk tajuk utama dan artikel secara langsung di seluruh web sekarang. - BeritaAPI.org

Pertama, anda harus terus maju dan mendaftar ke News Api untuk mendapatkan percuma apiKey( kunci pengesahan anda ).

Buat projek React Native baru, dan panggilnya news_app(atau apa sahaja yang anda mahukan). Di direktori projek, buat folder baru dan panggil src. Di dalam src direktori, buat folder dengan namanya components. Oleh itu, direktori projek anda akan kelihatan seperti ini:

Di dalam src folder, buat fail baru yang dipanggil news.js. Dalam fail ini kita akan mengambil JSON yang berisi tajuk utama dari News API.

berita.js

Pastikan anda mengganti YOUR_API_KEY_HERE dengan kunci API anda sendiri. Untuk maklumat lebih lanjut mengenai API Berita, pergi kedokumen newsapi .

Sekarang kita menyatakan getNews fungsi, yang akan mengambil artikel untuk kita. Eksport fungsi supaya kita dapat menggunakannya dalam App.jsfail kita .

Aplikasi.js

Dalam konstruktor, kita menentukan keadaan awal. articles akan menyimpan artikel kami setelah kami mengambilnya, dan refreshingakan membantu kami dalam menyegarkan animasi.Perhatikan bahawa saya menetapkan refreshing bool menjadi benar, kerana ketika kita memulakan aplikasi, kita ingin animasi dimulakan sementara kita memuat artikel (berita utama).

componentDidMountdipanggil sebaik sahaja komponen dipasang. Di dalamnya kita memanggil fetchNewskaedah.

componentDidMount() { this.fetchNews();}

Dalam fetchNewspanggilan kita getNews()yang mengembalikan janji. Oleh itu, kami menggunakan .then()kaedah yang menggunakan fungsi panggilan balik, dan fungsi panggilan balik mengambil argumen ( artikel ).

Sekarang tetapkan artikel di negeri ini untuk argumen artikel. Saya hanya menaip articleskerana ia adalah sintaks ES6 baru yang bermaksud { articles: articles }, dan kami menetapkan refreshing palsu untuk menghentikan animasi pemintal.

fetchNews() { getNews().then( articles => this.setState({ articles, refreshing: false }) ).catch(() => this.setState({ refreshing: false }));}

.catch()dipanggil dalam kes yang ditolak.

handleRefreshkaedah akan memulakan animasi pemintal dan memanggil fetchNews()kaedah. Kami lulus () => this.fetchNews (), jadi dipanggil segera setelah kami menetapkan keadaan.

handleRefresh() { this.setState({ refreshing: true },() => this.fetchNews());}

Di dalam kaedah render, kami mengembalikan FlatListkomponen. Kemudian kami melewati beberapa alat peraga. dataadalah susunan artikel dari this.state. Fungsi renderItemmengambil untuk membuat setiap item dalam array, tetapi dalam kes kami hanya mengembalikan Articlekomponen yang kami impor lebih awal (kita akan sampai ke sana) Dan kami memasukkan item artikel sebagai alat untuk digunakan kemudian dalam komponen itu.

Artikel.js

Dalam src / komponen buat fail JavaScript baru dan panggilnya Article.js

Mari mulakan dengan memasang dua perpustakaan mudah menggunakan npm:react-native-elemen , yang memberi kita beberapa pertunjukankomponen yang dapat kita gunakan, dan masa yang akan menangani masa kita.

Pasang menggunakan npm:

npm install --save react-native-elements moment

Dalam Artikel.js:

Terdapat banyak perkara yang berlaku di sini. Pertama, kita mulakan dengan merosakkan article prop dan styles objek yang ditentukan di bawah kelas .

Di dalam kaedah rendering, kami menentukan pemalar masa untuk menyimpan waktu ketika artikel itu diterbitkan. Kami menggunakan perpustakaan momen untuk menukar tarikh ke masa yang berlalu sejak itu , dan kami berlalu publishedAtatau masa dari sekarang jika publishedAtada null.

defaultImg diberikan URL gambar sekiranya URL gambar artikel itu batal.

Kaedah render kembali TouchableNativeFeedbackdikendalikan apabila pengguna menekan kad. Kami memberikannya beberapa alat peraga:, useForgroundyang memberitahu elemen untuk menggunakan latar depan ketika memaparkan kesan riak pada kad, dan onPress, yang mengambil fungsi dan melaksanakannya ketika pengguna menekan kad. Kami lulus () => Linking.openUrl(url), yang hanya akan membuka URL ke artikel penuh ketika kami menekan kad.

Kad mengambil tiga alat peraga:, featuredTitle yang merupakan tajuk yang diletakkan di atas gambar, featuredTitleStyle untuk menggayakannya, dan imageyang merupakan gambar artikel dari artikel artikel. Jika tidak, jika berlaku null, ia akan menjadi defaultImg.

.. featuredTitle={title} featuredTitleStyle={featuredTitleStyle} image={ defaultImg }..

Adapun elemen teks, ia akan memuat keterangan untuk artikel tersebut.

{description}

Kami menambahkan pembahagi untuk memisahkan keterangan daritime and source name.

Below the Divider , we have a View that contains the source name and the time the article was published.

.. {source.name.toUpperCase()} {time}..

After the class, we defined the styles for these components.

Now if we run the app:

There you go! The source code for the app is available on GitHub: HERE, feel free to fork it.

I hope you enjoyed my article! If you have any questions at all, feel free to comment or reach me on twitter and I will definitely help :)

?Buy me a coffee?

Next Story ?How to build native desktop apps with JavaScript