rn tourguide

rn-tourguide

Tourguide ที่ยืดหยุ่นสำหรับแอพ Native React ของคุณ!
- webabable?
(การเขียนใหม่ของ React-Native-Copilot)

? Demo Web?

การติดตั้ง

 yarn add rn-tourguide

 yarn add react-native-svg
react-native link react-native-svg

หากคุณใช้งาน Expo:

 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 <TourGuideProvider/> at the root of you app!
function App ( ) {
  return (
// If you added a statusbar in Andoid set androidStatusBarVisible: true as well to avoid vertical position issues
    < TourGuideProvider { ... { borderRadius : 16 } } >
      < AppContent />
    </ TourGuideProvider >
  )
}

const AppContent = ( ) => {
  const iconProps = { size : 40 , color : '#888' }

  // Use Hooks to control!
  const {
    canStart , // a boolean indicate if you can start tour guide
    start , // a function to start the tourguide
    stop , // a function  to stopping it
    eventEmitter , // an object for listening some events
  } = useTourGuideController ( )

  // Can start at mount ?
  // you need to wait until everything is registered ?
  React . useEffect ( ( ) => {
    if ( canStart ) {
      // ? test if you can start otherwise nothing will happen
      start ( )
    }
  } , [ canStart ] ) // ? don't miss it!

  const handleOnStart = ( ) => console . log ( 'start' )
  const handleOnStop = ( ) => console . log ( 'stop' )
  const handleOnStepChange = ( ) => console . log ( `stepChange` )

  React . useEffect ( ( ) => {
    eventEmitter . on ( 'start' , handleOnStart )
    eventEmitter . on ( 'stop' , handleOnStop )
    eventEmitter . on ( 'stepChange' , handleOnStepChange )

    return ( ) => {
      eventEmitter . off ( 'start' , handleOnStart )
      eventEmitter . off ( 'stop' , handleOnStop )
      eventEmitter . off ( 'stepChange' , handleOnStepChange )
    }
  } , [ ] )

  return (
    < View style = { styles . container } >
      { /*

          Use TourGuideZone only to wrap your component

      */ }
      < TourGuideZone
        zone = { 2 }
        text = { 'A react-native-copilot remastered! ?' }
        borderRadius = { 16 }
      >
        < Text style = { styles . title } >
          { 'Welcome to the demo ofn"rn-tourguide"' }
        </ Text >
      </ TourGuideZone >
      < View style = { styles . middleView } >
        < TouchableOpacity style = { styles . button } onPress = { ( ) => start ( ) } >
          < Text style = { styles . buttonText } > START THE TUTORIAL! </ Text >
        </ TouchableOpacity >

        < TourGuideZone zone = { 3 } shape = { 'rectangle_and_keep' } >
          < TouchableOpacity style = { styles . button } onPress = { ( ) => start ( 4 ) } >
            < Text style = { styles . buttonText } > Step 4 </ Text >
          </ TouchableOpacity >
        </ TourGuideZone >
        < TouchableOpacity style = { styles . button } onPress = { ( ) => start ( 2 ) } >
          < Text style = { styles . buttonText } > Step 2 </ Text >
        </ TouchableOpacity >
        < TouchableOpacity style = { styles . button } onPress = { stop } >
          < Text style = { styles . buttonText } > Stop </ Text >
        </ TouchableOpacity >
        < TourGuideZone
          zone = { 1 }
          shape = 'circle'
          text = { 'With animated SVG morphing with awesome flubber ??' }
        >
          < Image source = { { uri } } style = { styles . profilePhoto } />
        </ TourGuideZone >
      </ View >
      < View style = { styles . row } >
        < TourGuideZone zone = { 4 } shape = { 'circle' } >
          < Ionicons name = 'ios-contact' { ... iconProps } />
        </ TourGuideZone >
        < Ionicons name = 'ios-chatbubbles' { ... iconProps } />
        < Ionicons name = 'ios-globe' { ... iconProps } />
        < TourGuideZone zone = { 5 } >
          < Ionicons name = 'ios-navigate' { ... iconProps } />
        </ TourGuideZone >
        < TourGuideZone zone = { 6 } shape = { 'circle' } >
          < Ionicons name = 'ios-rainy' { ... iconProps } />
        </ TourGuideZone >
        < TourGuideZoneByPosition
          zone = { 7 }
          shape = { 'circle' }
          isTourGuide
          bottom = { 30 }
          left = { 35 }
          width = { 300 }
          height = { 300 }
        />
      </ View >
    </ View >
  )
}

อุปกรณ์ประกอบฉาก TourGuide :

 interface TourGuideZoneProps {
  zone : number // A positive number indicating the order of the step in the entire walkthrough.
  tourKey ?: string // A string indicating which tour the zone belongs to
  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
  keepTooltipPosition ?: boolean
  tooltipBottomOffset ?: number
  children : React . ReactNode
}

type Shape = 'circle' | 'rectangle' | 'circle_and_keep' | 'rectangle_and_keep'

export interface TourGuideProviderProps {
  tooltipComponent ?: React . ComponentType < TooltipProps >
  tooltipStyle ?: StyleProp < ViewStyle >
  labels ?: Labels
  startAtMount ?: boolean | string //  start at mount, boolean for single tours, string for multiple tours
  androidStatusBarVisible ?: boolean
  backdropColor ?: string
  verticalOffset ?: number
  wrapperStyle ?: StyleProp < ViewStyle >
  maskOffset ?: number
  borderRadius ?: number
  animationDuration ?: number
  children : React . ReactNode
  dismissOnPress ?: boolean
  preventOutsideInteraction ?: boolean
}

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
}

ในการเริ่มต้นการสอนคุณสามารถโทรหาฟังก์ชัน start จาก Hook Hook: Hook useTourGuideController :

 function HomeScreen ( ) {
  const { start } = useTourGuideController ( )

  React . useEffect ( ( ) => {
    start ( )
  } , [ ] )


  render ( ) {
    // ...
  }
}

export default HomeScreen

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

ใช้ทัวร์หลายครั้ง

หากคุณต้องการมีทัวร์หลายครั้ง (หน้าต่าง ๆ ประเภทผู้ใช้ที่แตกต่างกัน ฯลฯ ) คุณสามารถส่งผ่าน tourKey ไปยัง useTourGuideController เพื่อสร้างทัวร์ที่มีคีย์ไปยัง tourKey นั้น สำคัญ หากคุณใช้ทัวร์คีย์เพื่อให้ส่วนประกอบ TourGuideZone ลงทะเบียนอย่างถูกต้องคุณ ต้อง ทำหนึ่งในสองสิ่ง ทั้ง (1) ผ่านไปตาม tourKey ไปยังส่วนประกอบ TourGuideZone หรือ (2) สกัดส่วนประกอบ TourGuideZone จาก Hook เอง

(1) หากคุณต้องการผ่านไปตาม Tourkey

 import { TourGuideZone , useTourGuideController } from 'rn-tourguide'
const {
  canStart , // <-- These are all keyed to the tourKey
  start , // <-- These are all keyed to the tourKey
  stop , // <-- These are all keyed to the tourKey
  eventEmitter , // <-- These are all keyed to the tourKey
  tourKey , // <-- Extract the tourKey
} = useTourGuideController ( 'results' )

return (
  < TourGuideZone
    tourKey = { tourKey } // <-- Pass in the tourKey
    zone = { 2 }
    text = 'Check on your results'
  >
    { /** Children */ }
  < / TourGuideZone>
)

หรือ (2) หากคุณต้องการแยกส่วนประกอบโดยตรงจากตะขอ

 import { useTourGuideController } from 'rn-tourguide'
const { canStart , start , stop , TourGuideZone } =
  useTourGuideController ( 'results' )

return (
  < TourGuideZone // <-- No need to pass in the tourKey
    zone = { 2 }
    text = 'Check on your results'
  >
    { /** Children */ }
  < / TourGuideZone>
)

หากคุณใช้ทัวร์หลายครั้งและต้องการใช้ prop startAtMount บนคอมโพเนนต์ TourGuideProvider จากนั้นส่งผ่านสตริงของทัวร์ที่คุณต้องการเริ่มต้น

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

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

 const TooltipComponent = ( {
  isFirstStep ,
  isLastStep ,
  handleNext ,
  handlePrev ,
  handleStop ,
  currentStep ,
} ) => (
  // ...
) ;

< TourGuideProvider { ... { tooltipComponent : TooltipComponent } } >
// ...
</ TourGuideProvider >

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

คุณสามารถปรับแต่งเคล็ดลับเครื่องมือ:

 const style = {
  backgroundColor : '#9FA8DA' ,
  borderRadius : 10 ,
  paddingTop : 5 ,
}

< TourGuideProvider { ... { tooltipStyle : style } } >
// ...
< / TourGuideProvider >

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

คุณสามารถปรับแต่งสีหน้ากาก - ค่าเริ่มต้นคือ rgba(0, 0, 0, 0.4) โดยผ่านสตริงสีไปยังผู้ผลิต copilot HOC

 < TourGuideProvider { ... { backdropColor : 'rgba(50, 50, 100, 0.9)' } } >
  // ...
</ TourGuideProvider >

ฉลากที่กำหนดเอง (สำหรับ i18n)

คุณสามารถ จำกัด ฉลาก:

 < TourGuideProvider
  { ... {
    labels : {
      previous : 'Vorheriger' ,
      next : 'Nächster' ,
      skip : 'Überspringen' ,
      finish : 'Beenden' ,
    } ,
  } }
>
  // ...
</ TourGuideProvider >

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

นอกเหนือจาก start() แล้ว useTourGuideController ผ่านฟังก์ชั่น copilotEvents ไปยังส่วนประกอบเพื่อช่วยคุณในการติดตามความคืบหน้าการสอน มันใช้ Mitt ภายใต้ประทุนคุณสามารถดูว่า API เต็มรูปแบบได้อย่างไร

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

• start - การสอน Copilot ได้เริ่มขึ้นแล้ว
• stop - บทช่วยสอน Copilot สิ้นสุดลงหรือข้ามไปแล้ว
• stepChange - ขั้นตอนต่อไปจะถูกทริกเกอร์ ผ่านอินสแตนซ์ Step เป็นอาร์กิวเมนต์ตัวจัดการเหตุการณ์

ป้องกันการมีปฏิสัมพันธ์ภายนอก

บางครั้งคุณต้องป้องกันผู้ใช้โต้ตอบกับแอพในขณะที่ทัวร์จะปรากฏขึ้นในกรณีเช่นนี้ preventOutsideInteraction prop ขึ้นอยู่กับคุณ

default: false

 < TourGuideProvider preventOutsideInteraction >
  < AppContent />
</ TourGuideProvider > 

การบริจาค

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

จ้างผู้เชี่ยวชาญ!

กำลังมองหาผู้เชี่ยวชาญอิสระที่มีปฏิกิริยาตอบสนองที่มีประสบการณ์มากกว่า 14 ปีหรือไม่? ติดต่อฉันจากเว็บไซต์ของฉัน!

ใบอนุญาต

• MIT © 2020 Xavier Carpentier SAS, https://xaviercarpentier.com
• MIT © 2017 OK Grow!, https://www.okgrow.com