ไกด์ทัวร์ที่ยืดหยุ่นสำหรับ REACT NATIVE APP

ไกด์ทัวร์ที่ยืดหยุ่นสำหรับ React Native App

RN-TourGuide

มีความยืดหยุ่น มัคคุเทศก์ สำหรับแอปเนทีฟที่ตอบสนองของคุณ! Webable (การเขียนใหม่ของ react-native-copilot)

การติดตั้ง

yarn add rn-tourguide yarn add react-native-svg react-native link react-native-svg

หากคุณกำลังใช้งานเอ็กซ์โป:

expo install react-native-svg

การใช้งาน

import { TourGuideProvider, // Main provider TourGuideZone, // Main wrapper of highlight component TourGuideZoneByPosition, // Component to use mask on overlay (ie, position absolute) useTourGuideController, // hook to start, etc. } from 'rn-tourguide' // Add at the root of you app! function App() { return ( ) } const AppContent = () => { const iconProps = { size: 40, color: '#888' } // Use Hooks to control! const { start, stop, eventEmitter } = useTourGuideController() React.useEffect(() => { eventEmitter.on('start', () => console.log('start')) eventEmitter.on('stop', () => console.log('stop')) eventEmitter.on('stepChange', () => console.log(`stepChange`)) return () => eventEmitter.off('*', null) }, []) return ( {/* Use TourGuideZone only to wrap your component */} {'Welcome to the demo of
'rn-tourguide''} start()}> START THE TUTORIAL! start(4)}> Step 4 start(2)}> Step 2 Stop ) }

|_+_| อุปกรณ์ประกอบฉาก:

TourGuide

เพื่อเริ่มต้นบทช่วยสอน คุณสามารถโทร |_+_| ฟังก์ชันจาก |_+_| ตะขอ:

interface TourGuideZoneProps { zone: number // A positive number indicating the order of the step in the entire walkthrough. isTourGuide?: boolean // return children without wrapping id false text?: string // text in tooltip shape?: Shape // which shape maskOffset?: number // offset around zone borderRadius?: number // round corner when rectangle children: React.ReactNode } type Shape = 'circle' | 'rectangle' | 'circle_and_keep' | 'rectangle_and_keep' export interface TourGuideProviderProps { tooltipComponent?: React.ComponentType tooltipStyle?: StyleProp labels?: Labels androidStatusBarVisible?: boolean backdropColor?: string verticalOffset?: number wrapperStyle?: StyleProp maskOffset?: number borderRadius?: number animationDuration?: number children: React.ReactNode } interface TooltipProps { isFirstStep?: boolean isLastStep?: boolean currentStep: Step labels?: Labels handleNext?(): void handlePrev?(): void handleStop?(): void } interface Labels { skip?: string previous?: string next?: string finish?: string }

หากคุณกำลังมองหาตัวอย่างการทำงาน โปรดดูที่ ลิงค์นี้ .

ส่วนประกอบคำแนะนำเครื่องมือที่กำหนดเอง

คุณสามารถปรับแต่งคำแนะนำเครื่องมือโดยส่งส่วนประกอบไปยัง |_+_| เครื่องชง HOC หากคุณกำลังมองหาตัวอย่างส่วนประกอบคำแนะนำเครื่องมือ ลองดูที่ การนำคำแนะนำเครื่องมือเริ่มต้นไปใช้ .

start

กำหนดสไตล์คำแนะนำเครื่องมือเอง

คุณสามารถปรับแต่งสไตล์คำแนะนำเครื่องมือ:

useTourGuideController

สีหน้ากากที่กำหนดเอง

คุณสามารถปรับแต่งสีมาสก์ได้ - ค่าเริ่มต้นคือ |_+_| โดยส่งสตริงสีไปที่ |_+_| เครื่องชง HOC

function HomeScreen() { const { start } = useTourGuideController() React.useEffect(() => { start() }, []) render() { // ... } } export default HomeScreen

ป้ายกำกับที่กำหนดเอง (สำหรับ i18n)

คุณสามารถแปลป้ายกำกับ:

copilot

ฟังเหตุการณ์

พร้อมกับ |_+_|, |_+_| ผ่าน |_+_| ฟังก์ชันไปยังองค์ประกอบเพื่อช่วยคุณในการติดตามความคืบหน้าของบทช่วยสอน มันใช้ ของฉัน ภายใต้ประทุน คุณสามารถดูว่ามี API เต็มรูปแบบเพียงใด

รายการกิจกรรมที่มีอยู่คือ:

|_+_| — บทช่วยสอนนักบินได้เริ่มต้นขึ้น
|_+_| — บทช่วยสอน Copilot สิ้นสุดหรือข้ามไป
|_+_| — ขั้นตอนต่อไปจะถูกเรียก ผ่าน const TooltipComponent = ({ isFirstStep, isLastStep, handleNext, handlePrev, handleStop, currentStep, }) => ( // ... ); // ... อินสแตนซ์เป็นอาร์กิวเมนต์ตัวจัดการเหตุการณ์

การบริจาค

ยินดีต้อนรับปัญหาและคำขอดึงเสมอ

ดาวน์โหลดรายละเอียด:

ผู้เขียน: xcarpentier

การสาธิตสด: https://xcarpentier.github.io/rn-tourguide/

GitHub: https://github.com/xcarpentier/rn-tourguide

#react-native #react #mobile-apps

ไกด์ทัวร์ที่ยืดหยุ่นสำหรับ React Native App