TutorialReactNative
1.0.0
Tujuan tutorial ini adalah untuk memandu Anda dalam langkah pertama dengan React Native.
Mari Bangun Aplikasi Menggunakan TV Maze API dan mengikuti prototipe di bawah ini:
Tutorial ini sedang dibangun. Sejauh ini, ia membahas poin -poin berikut:
Repositori dengan kode siap, juga sedang dibangun : https://github.com/erbuen/favtvshow :)
Sebelum Anda mulai menulis kode, penting untuk memahami perilaku yang terkait dengan setiap layar.
Ini adalah layar yang akan dilihat pengguna saat memulai aplikasi.
Dia harus memiliki bilah pencarian dan, di sisi kanan bar, sebuah tombol.
Bilah pencarian harus memiliki placeholder. Saat memasukkan kata untuk dicari, kita harus menggunakan tombol yang disediakan oleh keyboard untuk memulai pencarian, misalnya, bagaimana kita terjadi ketika kita mengetik URL di browser seluler.
Hasil menemukan, harus ditampilkan di bawah bilah pencarian dan di bawah judul "hasil pencarian", satu demi baris. Jika Anda tidak mendapatkan hasil apa pun, Anda harus menampilkan pesan "tidak ada hasil yang ditemukan".
Hasilnya harus ditampilkan sebagai "kartu" yang berisi gambar, nama seri dan genre yang dikaitkan dengan itu (lihat Bagian 1.3).
Ketika pengguna memilih salah satu hasil, itu harus dibawa ke layar lain yang akan menampilkan informasi lengkap dari seri. Kami akan segera menjelaskan layar ini.
Tombol kanan bilah pencarian, ketika diklik, harus menampilkan seri favorit pengguna di bawah judul "Favorit".
Jika tidak ada pencarian yang sedang berlangsung, jangan menampilkan apa pun di layar.
Jika tidak ada seri favorit, tampilkan pesan "Anda masih belum memiliki seri favorit".
Ketika pengguna mengklik seri, baik di hasil pencarian atau mendukung, itu harus dibawa ke layar ini.
Layar ini harus menampilkan gambar yang terkait dengan seri, nama, genre dan ringkasan.
Di sebelah nama dan genre, Anda harus memiliki tombol sehingga pengguna dapat mendukung seri.
Ketika pengguna mengklik tombol untuk mendukung seri, data harus disimpan dalam penyimpanan global internal aplikasi dan harus ada beberapa pengembalian visual kepada pengguna yang bisa menjadi "roti panggang" atau serupa.
Di atas gambar seri, Anda harus memiliki tombol kembali yang akan dibawa ke layar sebelumnya.
Pengguna harus dapat menggulung layar karena isi ringkasan mungkin lebih besar dari ukuran layar perangkat.
Anda akan melihat daftar seri saat Anda mencari dan mendapatkan setidaknya satu hasil atau ketika Anda mengakses seri favorit Anda.
Untuk tujuan ini, kita harus membangun komponen kartu sebagai gambar di bawah ini:
Kartu harus diklik dan ditampilkan di daftar dataran.
Waktunya telah tiba untuk memulai proyek! Untuk melakukan ini, kunjungi halaman React Native dan klik Mulai .
Di halaman Memulai , Anda akan menemukan semua informasi yang Anda butuhkan untuk memulai dengan React Native. Untuk tutorial ini, kami sarankan Anda memilih opsi React Native ClickStart .
Kemudian pilih opsi terbaik yang sesuai dengan profil Anda. Dalam kasus saya, saya akan mengembangkan menggunakan Mac, jadi dalam pengembangan saya memilihnya dan karena saya akan menguji menggunakan iPhone, di Target , saya memilih target sebagai iOS , tetapi bisa memilih Android .
Anda hanya dapat memilih Target sebagai iOS jika Anda menggunakan Mac. Untuk Windows dan Linux , Anda harus memilih Android .
Setelah memilih opsi sesuai dengan sistem operasi Anda, ikuti instruksi untuk menginstal fasilitas yang diperlukan untuk menggunakan React Native.
Setelah menyelesaikan pemasangan semua dependensi sesuai dengan langkah demi langkah situs React Native, Anda akan dapat mem-boot proyek Anda dengan perintah berikut:
npx react-native init NomeDoProjetoPenciptaan proyek dapat memakan waktu beberapa menit, jangan khawatir dan ikuti log melalui terminal :)
Ketika proses selesai, Anda dapat menjalankan proyek Anda dengan perintah berikut:
cd NomeDoProjeto
npx react-native run-iosJika Anda menggunakan macOS. Atau, jika Anda menggunakan Windows atau Linux:
cd NomeDoProjeto
npx react-native run-androidSetelah beberapa saat - dan pertama kali kami menjalankan perintah ini benar -benar dapat memakan waktu lama - Anda akan melihat sesuatu seperti itu (tergantung pada OS target ):
Penting: Perhatikan bahwa teks proyek default dalam eksekusi pertama (tidak ada perubahan) menyebutkan opsi bagi Anda untuk melihat perubahan Anda (muat ulang) dan juga untuk men -debug. Ini berarti Anda dapat mengubah kode dan melihat perubahan dan membuat debug secara real time.
Agar Anda dapat memodifikasi proyek, Anda harus menggunakan editor kode pilihan Anda:
Saat membuka proyek di editor kode pilihan Anda, Anda akan melihat folder dan struktur file ini:
Catatan: Ini adalah bilah sisi kode studio visual saya. Saya menggunakan tema yang berbeda dari standar dan saya juga memiliki ekstensi yang memodifikasi gambar ikon yang terkait dengan setiap file atau folder. Nama yang saya berikan kepada proyek saya adalah Favtvshow .
Apa yang penting untuk diketahui di sini:
Folder Android dan iOS berisi kode asli yang dihasilkan. Anda dapat menjalankan aplikasi Anda di Android Studio atau Xcode membuka folder ini di setiap IDE masing -masing. Folder ini penting untuk menghasilkan pelepasan aplikasi Anda.
Folder Node_Modules berisi semua fasilitas proyek yang dipasang oleh NPM.
Aplikasi ini awalnya dapat diedit melalui file app.js.
File Index.js mencari dan merekam komponen global aplikasi kami, yaitu komponen pertama yang dimuat. Itu penting konten file app.js dan render di layar.
File paket.json berisi semua data di tempat dan juga skrip yang terkait dengan proyek Anda.
Hapus semua konten file app.js dan ganti dengan:
import React , { Component } from 'react' ; // 1
import { Text , View , StyleSheet } from 'react-native' ; // 2
// 3
export default class App extends Component {
render ( ) {
return (
// 4
< View style = { styles . hello } >
< Text > Hello, world! </ Text >
</ View >
) ;
}
}
// 5
const styles = StyleSheet . create ( {
hello : {
flex : 1 ,
justifyContent : 'center' ,
alignItems : 'center' ,
} ,
} ) ;Saat Anda menghapus konten App.js, letakkan konten baru ini dan simpan file, jika Anda menjalankan simulator, itu secara otomatis mengisi ulang tampilan.
Pastikan untuk membaca dokumentasi resmi tentang teks dan melihat komponen dan stylesheet abstraksi.
Mari kita ubah gaya teks sedikit di komponen teks . Pertama, tulis ulang baris baris teks sehingga seperti ini:
< Text style = {styles.text} > Hello, world! </ Text >Kemudian tambahkan gaya teks dalam gaya . Ini akan seperti ini:
const styles = StyleSheet . create ( {
hello : {
flex : 1 ,
justifyContent : 'center' ,
alignItems : 'center' ,
} ,
text : {
fontSize : 30 ,
color : 'blue' ,
} ,
} ) ;Lihat hasilnya di simulator saat Anda menyimpan file! :)
Kita perlu mulai memberi proyek kita wajah sesuai dengan prototipe. Kami akan melakukan ini secepat mungkin, setidaknya pada awalnya.
Bagaimana kita bisa menambahkan elemen yang diperlukan dari layar beranda? Salah satunya adalah bilah pencarian. Ada perpustakaan dengan komponen siap ini, tetapi agar kami dapat belajar bagaimana melakukannya, kami tidak akan menggunakannya.
Mari kita tambahkan komponen TextInput ke Impor Baris Kedua kami. Lihat dokumentasi komponen ini di sini.
import { Text , View , StyleSheet , TextInput } from 'react-native' ;Mari kita ubah bagian kode yang menangani rendering layar menjadi seperti ini:
export default class App extends Component {
render ( ) {
return (
< View style = { styles . screen } >
< View style = { styles . search } >
< TextInput style = { styles . input } />
</ View >
< View style = { styles . results } >
< Text > Os resultados aparecerão aqui </ Text >
</ View >
</ View >
) ;
}
}Kami memiliki komponen tampilan yang merangkum semua elemen layar dan menerima gaya layar .
Dalam komponen ini, kami memiliki dua komponen tampilan lainnya: satu di bagian atas (latar belakang putih) yang menerima gaya pencarian dan satu di bawah ini (abu -abu muda untuk visualisasi) yang menerima hasilnya .
Di dalam komponen atas, kami memiliki komponen TextView . Dan di dalam komponen di bagian bawah layar kami memiliki komponen teks .
Sekarang mari kita ubah gaya sehingga mereka seperti ini:
const styles = StyleSheet . create ( {
screen : {
flex : 1 ,
flexDirection : 'column' ,
} ,
search : {
flex : 1 ,
justifyContent : 'center' ,
alignItems : 'center' ,
} ,
input : {
marginTop : 55 ,
height : 40 ,
width : 250 ,
borderColor : 'lightgray' ,
borderWidth : 1 ,
padding : 10 ,
fontSize : 20 ,
} ,
results : {
flex : 4 ,
backgroundColor : 'lightgray' ,
alignItems : 'center' ,
} ,
} ) ;Buat perubahan dan simpan file. Sekarang lihat penjelasan untuk setiap item:
Komponen tampilan yang mencakup semua komponen lain (gaya nama layar ) memiliki Flex sama dengan 1. Ini membuat semuanya layar, karena mencakup semua yang lain. Ini memiliki FlexDirection yang sama dengan kolom karena kami ingin komponen di dalamnya mengatur secara vertikal.
Kami memiliki komponen tampilan gaya pencarian ke atas dan hasilnya dengan hasil yang tetap di bawah. Mereka berada di dalam komponen tampilan dengan gaya layar dan mengatur secara vertikal. Mereka harus membagi ruang yang sama. Kami melakukan ini menggunakan Flex. Bagian atas memiliki Flex 1 dan bagian bawah 4. Ini berarti bahwa kami memiliki 5 bagian proporsional (1+4), yang memiliki fleksibel sama dengan 1 menempati 1/5 dan fleksibel yang sama dengan 4 menempati 4/5. PENTING: Lihat Dokumentasi Asli React untuk mempelajari lebih lanjut tentang Flexbox :)
Melihat komponen tampilan gaya pencarian , di dalam kami meletakkan komponen TextView yang disesuaikan dengan gaya input . Dengan itu, kami dapat mendefinisikan tinggi (tinggi), lebar (lebar), jarak dari margin atas layar (margintop), warna bordercolor, ketebalan perbatasan, ke belakang (padding) dan ukuran sumber lapangan (fontsize).
Di simulator, jika Anda mengklik TextInput , keyboard muncul secara otomatis. Anda dapat mengetik sesuatu dan mengklik "kembali" (dalam kasus iOS). Untuk saat ini, tidak ada yang akan terjadi karena kita masih perlu menerapkan perilaku tersebut.
Mari kita tambahkan variabel yang disebut status sebelum fungsi render () yang akan menerima teks yang diketik dalam TextInput .
state = {
searchText : '' ,
}Kami juga akan mengubah TextInput untuk memiliki placeholder dan menyimpannya ke variabel negara bagian teks yang diketik. Dia akan seperti ini:
< TextInput
placeholder = { 'Procure uma série' }
style = { styles . input }
onChangeText = { ( text ) => this . setState ( { searchText : text } ) }
/>Perhatikan metode OnchangeText komponen. Ini menerima nilai teks dan disimpan (this.setState) di SearchText . Kita dapat memeriksa ini secara real time membuat perubahan kecil di komponen lain.
Dimana kita memiliki:
< Text > Os resultados aparecerão aqui </ Text >Ubah untuk:
< Text > {this.state.searchText} </ Text >Simpan dan uji untuk mengetik sesuatu di TextInput :)
Mengubah teks kami sedikit lebih banyak, mari kita gunakan metode onsubmitediting untuk membuat pencarian terjadi ketika pengguna menekan tombol pengembalian (atau setara di Android). Untuk saat ini kami belum akan mengajukan permintaan apa pun ke API, tetapi kami akan meninggalkan segalanya!
Teks kami akan seperti ini:
< TextInput
placeholder = { 'Procure uma série' }
style = { styles . input }
onChangeText = { ( text ) => this . setState ( { searchText : text } ) }
onSubmitEditing = { ( ) => this . submitSearch ( ) }
/>Kita perlu menambahkan fungsi submitsearch () , ini dapat dilakukan tepat di bawah keadaan . Ini akan seperti ini:
state = {
searchText : '' ,
}
submitSearch ( ) {
alert ( 'Buscar: ' + this . state . searchText ) ;
}Karena kami belum mengajukan permintaan, saya memberikan peringatan sehingga Anda menyadari bahwa konten yang diketik di bidang teks akan digunakan dalam pencarian, karena akan terjadi dalam fungsi Submitsearch () .
Sehingga kita dapat mempopulerkan aplikasi kita dengan data, mari kita gunakan labirin TV API yang merupakan API REST terbuka (kita tidak perlu otentikasi), membebaskan dan mengembalikan data dalam format JSON.
Mari kita lihat contoh pencarian menggunakan API ini. Jika kami ingin melakukan pencarian dengan kata anatomi , kami akan menggunakan titik akhir berikut:
[GET] http://api.tvmaze.com/search/shows?q=anatomy
Akibatnya, kami akan memiliki JSON di bawah ini (hanya satu peregangan yang ditampilkan) yang berisi semua entri yang memiliki anatomi atau semacamnya:
[
{
"score" : 20.919525 ,
"show" : {
"id" : 67 ,
"url" : " http://www.tvmaze.com/shows/67/greys-anatomy " ,
"name" : " Grey's Anatomy " ,
"type" : " Scripted " ,
"language" : " English " ,
"genres" : [
" Drama " ,
" Romance " ,
" Medical "
],
"status" : " Running " ,
"runtime" : 60 ,
"premiered" : " 2005-03-27 " ,
"officialSite" : " http://abc.go.com/shows/greys-anatomy/ " ,
"schedule" : {
"time" : " 21:00 " ,
"days" : [
" Thursday "
]
},
"rating" : {
"average" : 8.3
},
"weight" : 99 ,
"network" : {
"id" : 3 ,
"name" : " ABC " ,
"country" : {
"name" : " United States " ,
"code" : " US " ,
"timezone" : " America/New_York "
}
},
"webChannel" : null ,
"externals" : {
"tvrage" : 3741 ,
"thetvdb" : 73762 ,
"imdb" : " tt0413573 "
},
"image" : {
"medium" : " http://static.tvmaze.com/uploads/images/medium_portrait/211/529884.jpg " ,
"original" : " http://static.tvmaze.com/uploads/images/original_untouched/211/529884.jpg "
},
"summary" : " <p>The doctors of Grey Sloan Memorial Hospital deal with life-or-death consequences on a daily basis -- it's in one another that they find comfort, friendship and, at times, more than friendship. Together they're discovering that neither medicine nor relationships can be defined in black and white. Real life only comes in shades of grey.</p> " ,
"updated" : 1576320037 ,
"_links" : {
"self" : {
"href" : " http://api.tvmaze.com/shows/67 "
},
"previousepisode" : {
"href" : " http://api.tvmaze.com/episodes/1749376 "
},
"nextepisode" : {
"href" : " http://api.tvmaze.com/episodes/1760391 "
}
}
}
},
{
"score" : 15.932307 ,
"show" : {
"id" : 34388 ,
"url" : " http://www.tvmaze.com/shows/34388/greys-anatomy-b-team " ,
"name" : " Grey's Anatomy: B-Team " ,
"type" : " Scripted " ,
"language" : " English " ,
"genres" : [
" Drama " ,
" Romance " ,
" Medical "
],
"status" : " Ended " ,
"runtime" : 3 ,
"premiered" : " 2018-01-11 " ,
"officialSite" : " http://abc.go.com/shows/greys-anatomy-b-team " ,
"schedule" : {
"time" : " " ,
"days" : [
" Thursday "
]
},
"rating" : {
"average" : null
},
"weight" : 80 ,
"network" : null ,
"webChannel" : {
"id" : 95 ,
"name" : " ABC.com " ,
"country" : {
"name" : " United States " ,
"code" : " US " ,
"timezone" : " America/New_York "
}
},
"externals" : {
"tvrage" : null ,
"thetvdb" : null ,
"imdb" : null
},
"image" : {
"medium" : " http://static.tvmaze.com/uploads/images/medium_portrait/142/355662.jpg " ,
"original" : " http://static.tvmaze.com/uploads/images/original_untouched/142/355662.jpg "
},
"summary" : " <p>A fresh crop of interns face their first day at Grey Sloan Memorial Hospital. Can these new surgeons survive the pressures of high-stakes medicine, intimidating attendings, and cut throat competition?</p> " ,
"updated" : 1526845476 ,
"_links" : {
"self" : {
"href" : " http://api.tvmaze.com/shows/34388 "
},
"previousepisode" : {
"href" : " http://api.tvmaze.com/episodes/1390266 "
}
}
}
}
]Anda dapat melihat versi yang lebih ramah dari konten JSON ini menggunakan JSON Editor Online. Saya telah meninggalkan disimpan sehingga Anda dapat melihat semuanya! Klik disini ;)
Di JSON Editor Online mudah untuk melihat bahwa itu adalah array dengan 9 objek dan setiap objek adalah seri.
Menurut prototipe dan apa yang telah kami terapkan sejauh ini:
Mari kita praktikkan ini di bagian selanjutnya menggunakan Axios.
Kita perlu menginstal pustaka Axios di proyek. Kami akan melakukan ini dengan mengetik perintah berikut di terminal:
$ npm install axiosSetelah itu, mari kita buat folder layanan dan file API.js di dalamnya. Mari masukkan kode berikut di file:
import axios from 'axios' ; // 1
// 2
const api = axios . create ( {
baseURL : 'http://api.tvmaze.com/' ,
} ) ;
export default api ;Di App.js , mari kita impor file API.js :
import api from './service/api' ;Dan mari kita ubah fungsi Submitsearch () menjadi seperti ini:
submitSearch = async ( ) => { // 1
if ( this . state . searchText != '' ) { // 2
try { // 3
const response = await api . get ( '/search/shows' , { // 4
params : { q : this . state . searchText } // 5
} ) ;
alert ( JSON . stringify ( response ) ) ;
} catch ( error ) {
alert ( JSON . stringify ( error ) ) ;
}
}
}Peringatan di dalam blok coba dan di dalam blok tangkapan akan berguna untuk melihat jawaban yang diperoleh dalam permintaan. Di lain waktu, kami akan menggunakan jawaban ini dengan cara lain :)
Lihat lebih lanjut tentang fungsi asinkron di sini dan tentang janji di sini.
Mari kita mulai menerapkan FlatList untuk menampilkan daftar hasil pencarian. Mari kita ubah impor kita untuk ini:
import { Text , View , StyleSheet , TextInput , FlatList } from 'react-native' ;Maka kami akan memodifikasi fungsi negara dan submitsearch () sehingga mereka:
state = {
searchText : '' ,
searchResults : null , // 1
}
submitSearch = async ( ) => {
if ( this . state . searchText != '' ) {
try {
const response = await api . get ( '/search/shows' , {
params : { q : this . state . searchText } ,
} ) ;
this . setState ( { searchResults : response . data } ) ; // 2
} catch ( error ) {
alert ( JSON . stringify ( error ) ) ;
}
}
}Kami juga harus memodifikasi render () , memasukkan daftar dataran ke dalamnya:
render ( ) {
return (
< View style = { styles . screen } >
< View style = { styles . search } >
< TextInput
placeholder = { 'Procure uma série' }
style = { styles . input }
onChangeText = { ( text ) => this . setState ( { searchText : text } ) }
onSubmitEditing = { ( ) => this . submitSearch ( ) }
/>
</ View >
< View style = { styles . results } >
< FlatList
data = { this . state . searchResults }
renderItem = { ( { item } ) => < Text > { item . show . name } </ Text > }
keyExtractor = { item => item . show . id }
/>
</ View >
</ View >
) ;
}Perhatikan bahwa kami hanya menampilkan nama seri dengan komponen teks . Namun, mari kita buat tipe kartu kita di sini, sesuai Bagian 1.3.
Dalam sebuah proyek, kami mungkin akan membuat lebih dari satu komponen. Untuk memfasilitasi organisasi, mari kita buat folder komponen dan semua komponen yang kami buat akan disimpan di dalamnya.
Di dalam folder ini, kami akan membuat file yang disebut card.js dengan konten berikut:
import React , { Component } from 'react' ;
import { Text , View , TouchableOpacity , Image , StyleSheet } from 'react-native' ;
export default class Card extends Component {
render ( ) {
return (
< TouchableOpacity style = { styles . container } >
< View style = { styles . cardView } >
< View >
< Image
style = { styles . image }
source = { { uri : this . props . info . image == null ? 'https://i.ibb.co/YfZFr7k/noimg.png' : ( this . props . info . image . original || this . props . info . image . medium ) } }
/>
</ View >
< View style = { { flexDirection : 'column' } } >
< Text style = { styles . name } > { this . props . info . name || 'Sem nome' } </ Text >
< Text style = { styles . genres } > { this . props . info . genres || 'Sem gênero' } </ Text >
</ View >
</ View >
</ TouchableOpacity >
) ;
}
}
const styles = StyleSheet . create ( {
container : {
padding : 10 ,
} ,
cardView : {
alignItems : 'center' ,
flexDirection : 'row' ,
} ,
image : {
width : 80 ,
height : 120 ,
resizeMode : 'contain' ,
} ,
name : {
fontSize : 20 ,
marginLeft : 10 ,
} ,
genres : {
fontSize : 16 ,
marginLeft : 10 ,
} ,
} ) ;Perhatikan bahwa nama komponen adalah kartu dan bahwa saya menggunakan gambar untuk berfungsi sebagai placeholder jika seri tidak memiliki URL yang valid.
Sekarang mari kita impor komponen baru kami ke file app.js :
import Card from './components/card' ;Dan di flatlist kami akan mengganti konten saat ini dengan:
< FlatList
data = { this . state . searchResults }
renderItem = { ( { item } ) => < Card info = { item . show } /> }
keyExtractor = { item => item . show . id }
/>Alih -alih menggunakan komponen teks , kami sekarang menggunakan kartu dan kami melewatinya melalui atribut info yang menerima objek show .
Lihat file card.js yang kami gunakan beberapa kali ekspresi this.props.info untuk mengakses nilai yang dilewati ketika komponen digunakan. Untuk mendapatkan nama seri ini, kami menggunakan this.props.info.name , misalnya.
