react native slider intro

- React-Native-Slider-intro

แพ็คเกจ Native React Native แบบง่ายและปรับแต่งได้ซึ่งใช้ตัวเลื่อนที่ไม่ซ้ำกัน

การติดตั้ง

yarn add react-native-slider-intro

หรือ

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

เรียกใช้โครงการตัวอย่าง

iOS

yarn example ios

Android

yarn example android

การใช้งาน

ตัวอย่างพื้นฐาน

 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 ;

แพ็คเกจมีตัวเลือกเรนเดอร์สองตัวเลือก นอกเหนือจาก default render เมื่อคุณสามารถส่ง data เป็นอาร์เรย์ของอุปกรณ์ประกอบ numberOfSlides SliderIntroItemProps คุณสามารถใช้ custom render กับ children

คุณสมบัติ

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
data	อาร์เรย์	-	Default render - อาร์เรย์ของรายการ เด็กจะถูกละเว้นหากผ่านข้อมูล
numberOfSlides	อาร์เรย์	ตัวเลข	Custom render - หากเด็กผ่านไปข้อมูลจะถูกละเว้น จำเป็นต้องใช้ numberofslides ในกรณีนี้
children	ReactNode	โมฆะ	Custom render - องค์ประกอบ JSX ที่จะแสดงผล
navigationBarBottom	ตัวเลข	0	ค่าที่กำหนดเองของ DOT Navigation Container Position
navigationBarHeight	ตัวเลข	70	ความสูงของคอนเทนเนอร์นำทาง DOT
animateSlideSpeed	ตัวเลข	15	ความเร็วของภาพเคลื่อนไหวสไลเดอร์
navContainerMaxSizePercent	ตัวเลข	0.5	ค่าร้อยละของความกว้างของการนำทางของคอนเทนเนอร์
dotWidth	ตัวเลข	12	รัศมีของวงกลม 'dot' ของการนำทาง
fixDotOpacity	ตัวเลข	0.35	ความทึบแต่ละจุดซึ่งไม่มีภาพเคลื่อนไหว
fixDotBackgroundColor	สี	สีเทา	แต่ละจุดจุดที่ไม่มีภาพเคลื่อนไหว
animatedDotBackgroundColor	สี	สีขาว	แต่ละจุดจุดที่มีภาพเคลื่อนไหว
animateDotSpeed	ตัวเลข	8	ความเร็วของภาพเคลื่อนไหว DOT
animateDotBouncing	ตัวเลข	2	ค่า 'bounciness' ของภาพเคลื่อนไหวทั้งหมด https://reactnative.dev/docs/animated#spring
hasReactNavigation	บูลีน	เท็จ	มีปัญหาเกี่ยวกับพฤติกรรมของปุ่มเมื่อคุณใช้การตอบโต้ คุณควรใช้ useFocusEffect ในกรณีนี้เพื่อเข้าถึงพฤติกรรมที่คาดหวัง ข้อมูลเพิ่มเติม: https://reactnavigation.org/docs/custom-android-back-button-handling/#why-not-use-use-poment-lifecycle-methods
useCustomBackHandlerEffect	การทำงาน	ไม่มี	ดังที่ฉันได้กล่าวไว้ข้างต้นบางครั้งเราควรเขียนพฤติกรรม backhandler ขั้นพื้นฐานใหม่ คุณสมบัตินี้จะเป็นเบ็ดที่กำหนดเอง ดูตัวอย่างสำหรับข้อมูลเพิ่มเติม: React Navigation Custom Hook ตัวอย่าง
backHandlerBehaviour	สาย	activeminusone	เสานี้สามารถควบคุมพฤติกรรมของปุ่ม ค่าควรเป็น activeMinusOne หรือ previous
skipLabel	สาย	ข้าม	ฉลากที่กำหนดเองของปุ่มข้าม
nextLabel	สาย	ต่อไป	ฉลากที่กำหนดเองของปุ่มถัดไป
doneLabel	สาย	เสร็จแล้ว	ฉลากที่กำหนดเองของปุ่มทำเสร็จ
renderSkipButton	การทำงาน	Skip/Previous Button Renderer เริ่มต้น	ใช้เพื่อจัดหาปุ่มข้าม/ก่อนหน้าของคุณเอง
renderNextButton	การทำงาน	ค่าเริ่มต้นปุ่มถัดไป renderer	ใช้เพื่อจัดหาปุ่มถัดไปของคุณเอง
renderDoneButton	การทำงาน	ปุ่มเรนเดอร์เริ่มต้นเสร็จสิ้น	ใช้เพื่อจัดหาปุ่มของคุณเอง
onDone	การทำงาน	ไม่มี	พฤติกรรมของปุ่มทำ
onSkip	การทำงาน	ไม่มี	พฤติกรรมของปุ่มข้าม
showLeftButton	บูลีน	จริง	แสดงข้ามหรือปุ่มก่อนหน้าทางด้านซ้าย
leftButtonType	สาย	ข้าม	ประเภทปุ่มทางด้านซ้ายควร skip หรือ previous
columnButtonStyle	บูลีน	เท็จ	ปุ่มจะปรากฏในคอลัมน์
showStatusBar	บูลีน	เท็จ	แสดงแถบสถานะที่ด้านบนของหน้าจอ คุณสามารถสร้างแถบสถานะของคุณเองนอกส่วนประกอบนี้
statusBarColor	สี	#febe29	สีพื้นหลังของแถบสถานะ
renderStatusBar	การทำงาน	แท่งสถานะเริ่มต้น	ใช้เพื่อจัดหาส่วนประกอบแถบสถานะของคุณเอง
limitToSlide	ตัวเลข	(ความกว้างของอุปกรณ์สูงสุด) * 0.35	ใช้เพื่อเปลี่ยนขีด จำกัด ของภาพเคลื่อนไหวสไลด์ มันถูกคำนวณตามคุณสมบัติ gestureState.dx ของ panresponder

ตัวอย่าง

• ตัวอย่างพื้นฐาน
• ตัวอย่างปุ่มคอลัมน์
• ตัวอย่างปุ่มที่กำหนดเอง
• ตัวอย่างปุ่มก่อนหน้า
• ตัวอย่างแถบสถานะ
• ตัวอย่างฟังก์ชั่นการเรนเดอร์ที่กำหนดเอง
• React Navigation Custom Hook ตัวอย่าง (ไม่สามารถเรียกใช้ได้ไฟล์มีข้อมูลเพิ่มเติมว่าคุณสามารถทดสอบได้อย่างไร)
• อีกตัวอย่างหนึ่งสำหรับการปรับแต่งแพ็คเกจด้วยไลบรารีบุคคลที่สาม

การแก้ไขปัญหา

ฟังก์ชั่น TouchableOpacity Onpress: ฉันได้สร้างปัญหาใหม่เกี่ยวกับที่เก็บข้อมูลแบบตอบโต้อย่างเป็นทางการเนื่องจาก TouchableOpacity Button และ Pressable ไม่ทำงานภายใน PanResponder ด้วย NavigationContainer Reaction-Navigation วิธีแก้ปัญหาของฉัน: นำเข้า TouchableWithoutFeedback จาก react-native-gesture-handler แทน react-native และใช้ onPressIn แทนฟังก์ชั่น onPress จากนั้นเขียนทับฟังก์ชั่น renderItem

การบริจาค

ดูคู่มือการสนับสนุนเพื่อเรียนรู้วิธีการมีส่วนร่วมในที่เก็บและเวิร์กโฟลว์การพัฒนา

ใบอนุญาต

มิกซ์