react native slider intro

? react-native-slider-intro

Paket asli React Native yang sederhana dan dapat disesuaikan yang mengimplementasikan slider unik.

Instalasi

yarn add react-native-slider-intro

atau

npm install react-native-slider-intro --save

Menjalankan Contoh Proyek

iOS

yarn example ios

Android

yarn example android

Penggunaan

Contoh Dasar

 import React from 'react' ;
import SliderIntro from 'react-native-slider-intro' ;

const slides = [
  {
    index : 1 ,
    title : 'First step' ,
    text : 'Simple description.' ,
    link : 'https://pccontroller.rnstudio.hu' ,
    image : require ( './images/step1.png' ) ,
    backgroundColor : '#febe29' ,
  } ,
  {
    index : 2 ,
    title : 'Second step' ,
    text : 'Simple description for the second step.' ,
    image : require ( './images/step2.png' ) ,
    backgroundColor : '#febe29' ,
  } ,
] ;

const BasicExample = ( { closeExample } : { closeExample : ( ) => void } ) => {
  return (
    < SliderIntro data = { slides } onDone = { closeExample } onSkip = { closeExample } / >
  ) ;
} ;

export default BasicExample ;

Paket ini mencakup dua opsi render. Selain default render ketika Anda dapat meneruskan data sebagai berbagai alat peraga SliderIntroItemprops, Anda dapat menggunakan custom render dengan children dan numberOfSlides properti slide.

Properti

Nama	Jenis	Nilai default	Keterangan
data	array	[]	Default render - Array item. Anak -anak akan diabaikan jika data dilewatkan.
numberOfSlides	array	nomor	Custom render - Jika anak -anak disahkan, data akan diabaikan. Numberofslides diperlukan dalam kasus ini.
children	Reactnode	batal	Custom render - Elemen JSX untuk Render.
navigationBarBottom	nomor	0	Nilai Kustom Posisi Bawah Kontainer Navigasi Dot
navigationBarHeight	nomor	70	Tinggi wadah navigasi titik
animateSlideSpeed	nomor	15	Kecepatan animasi slider
navContainerMaxSizePercent	nomor	0,5	Persen Nilai Lebar Kontainer Navigasi
dotWidth	nomor	12	Jari -jari lingkaran navigasi 'titik'
fixDotOpacity	nomor	0.35	Setiap titik opacity yang tidak memiliki animasi
fixDotBackgroundColor	warna	abu-abu	Setiap latar belakang titik yang tidak memiliki animasi
animatedDotBackgroundColor	warna	putih	Setiap latar belakang titik yang memiliki animasi
animateDotSpeed	nomor	8	Kecepatan Animasi Dot
animateDotBouncing	nomor	2	Nilai 'Bounciness' dari semua animasi. https://reactnative.dev/docs/animated#spring
hasReactNavigation	Boolean	PALSU	Ada masalah dengan perilaku backbutton saat Anda menggunakan reaksi-navigasi. Anda harus menggunakan useFocusEffect dalam kasus ini untuk mencapai perilaku yang diharapkan. Info lebih lanjut: https://reactnavigation.org/docs/custom-android-back-button-handling/#why-not-use-component-lifecycle-methods
useCustomBackHandlerEffect	fungsi	tidak ada	Seperti yang saya sebutkan di atas, kadang -kadang kita harus menulis ulang perilaku backhandler dasar. Properti ini akan menjadi kait khusus. Lihat contoh untuk info lebih lanjut: React Navigation Custom Hook Contoh
backHandlerBehaviour	rangkaian	ActiveMinusone	Prop ini dapat mengontrol perilaku backbutton. Nilainya harus activeMinusOne atau previous
skipLabel	rangkaian	Melewati	Label Kustom Tombol Skip
nextLabel	rangkaian	Berikutnya	Label Kustom dari Tombol Berikutnya
doneLabel	rangkaian	Selesai	Label Kustom dari Tombol Selesai
renderSkipButton	fungsi	Default Skip/Renderer Tombol Sebelumnya	Gunakan untuk menyediakan tombol lewati/sebelumnya
renderNextButton	fungsi	Renderer tombol Default Next	Gunakan untuk memasok tombol Anda sendiri berikutnya
renderDoneButton	fungsi	Renderer tombol yang dilakukan secara default	Gunakan untuk memasok tombol selesai Anda sendiri
onDone	fungsi	tidak ada	Perilaku tombol selesai
onSkip	fungsi	tidak ada	Perilaku tombol lewati
showLeftButton	Boolean	BENAR	Tampilkan lompatan atau tombol sebelumnya di sisi kiri
leftButtonType	rangkaian	melewati	Jenis tombol di sisi kiri harus skip atau previous
columnButtonStyle	Boolean	PALSU	Tombol akan muncul di kolom
showStatusBar	Boolean	PALSU	Tampilkan bilah status di atas layar. Anda dapat membuat bilah status Anda sendiri di luar komponen ini
statusBarColor	warna	#FEBE29	Warna latar belakang batang status
renderStatusBar	fungsi	Renderer bilah status default	Gunakan untuk menyediakan komponen bilah status Anda sendiri
limitToSlide	nomor	(Lebar Max Perangkat) * 0.35	Gunakan untuk mengubah batas animasi slide. Ini dihitung berdasarkan properti Panresponder's gestureState.dx .

Contoh

• Contoh Dasar
• Contoh tombol kolom
• Contoh tombol khusus
• Contoh tombol sebelumnya
• Contoh bilah status
• Contoh fungsi render slider khusus
• Contoh reaksi navigasi kustom (tidak dapat dijalankan, file tersebut mencakup lebih banyak informasi bagaimana Anda dapat mengujinya.)
• Contoh lain untuk menyesuaikan paket dengan perpustakaan pihak ketiga.

Pemecahan masalah

Fungsi OnPress TouchablePacity: Saya telah membuat masalah baru di repositori reaksi-asli resmi, karena TouchableOpacity , Button dan Pressable tidak dapat bekerja di dalam PanResponder dengan NavigationContainer Navigation-Navigation. Solusi saya: Impor TouchableWithoutFeedback dari react-native-gesture-handler alih-alih react-native dan gunakan onPressIn alih-alih fungsi onPress kemudian menimpa fungsi renderitem.

Berkontribusi

Lihat Panduan Kontribusi untuk mempelajari cara berkontribusi pada repositori dan alur kerja pengembangan.

Lisensi

Mit