Pengklonan pengklonan menggunakan elemen dan ekspo yang bertindak balas

Tutorial ini membimbing anda melalui membina klon Tinder menggunakan unsur-unsur dan ekspo asli, yang memberi tumpuan kepada mewujudkan susun atur yang sempurna untuk mudah alih. Kami akan membina empat skrin utama: rumah, pilihan atas, profil, dan mesej.

Ciri -ciri Utama:

memanfaatkan elemen asli React untuk gaya silang platform yang diselaraskan (Android, iOS, Web).
menggunakan Expo untuk persediaan dan pelaksanaan projek yang dipermudahkan.
Melaksanakan navigasi tersuai dan bar tab menggunakan navigasi React.
menggunakan
• untuk swiping kad gaya Tinder. react-native-deck-swiper
Menguruskan aset dan kebergantungan dengan cekap dengan benang.

Prasyarat:

Basic React Native and Expo Knowledge diandaikan. Anda memerlukan klien Expo pada peranti mudah alih anda atau simulator, bersama dengan benang dan

dipasang. Tutorial menggunakan nod 11.14.0, NPM 6.4.1, benang 1.15.2, dan Expo 2.16.1 (kemas kini yang diperlukan). expo-cli

Persediaan Projek:

Buat projek ekspo baru:
1. (pilih templat "tab"). expo init expo-tinder
Pasang kebergantungan:
2. yarn install

React Integration Elements Native:

Pasang Elemen Native React:

yarn add react-native-elements

Membina UI:

Tutorial memperincikan penciptaan setiap skrin, termasuk:

• Skrin Utama:

  Menggunakan untuk kad swip ( komponen). Data dummy dimuatkan dari react-native-deck-swiper. Card constants/Pics.js

• Skrin Picks Top:

  Memaparkan grid kad profil yang boleh ditandakan menggunakan komponen . Data yang diperolehi dari react-native-elements. Tile constants/Pics.js

• Skrin Mesej:

  membentangkan senarai mesej menggunakan komponen . Data dari react-native-elements. ListItem constants/Messages.js

• Skrin Profil:

  Menunjukkan profil pengguna dengan imej, butiran, dan pautan media sosial. Menggunakan komponen dan gaya tersuai. react-native-elements

Tutorial menyediakan coretan kod untuk setiap skrin, bersama dengan penjelasan dan butiran gaya. Ingatlah untuk memasukkan imej aset yang diperlukan dari repositori GitHub.

Persediaan navigasi:

Tutorial mengubah suai navigasi tab lalai (MainTabNavigator.js) untuk memasukkan empat skrin, menyesuaikan ikon menggunakan komponen TabBarIcon adat dan mengeluarkan tajuk lalai menggunakan headerMode: 'none'. SafeAreaView digunakan untuk memastikan rendering yang betul dalam kawasan selamat peranti.

Kod Lengkap boleh didapati di GitHub. Tutorial ini disimpulkan dengan Soalan Lazim yang meliputi penyesuaian UI, penambahan ciri, integrasi firebase, penempatan, pengoptimuman prestasi, keselamatan, pengewangan, pengendalian data, ujian, dan kemas kini.

Atas ialah kandungan terperinci Pengklonan pengklonan menggunakan elemen dan ekspo yang bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!