rn tourguide

rn-tourguide

جولة مرنة لتطبيق React Native الخاص بك!
؟ قابلة للإنترنت؟
(إعادة كتابة منصيب المفاعل)

؟ الويب التجريبي؟

تثبيت

 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 <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 من خطاف useTourGuideController :

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

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


  render ( ) {
    // ...
  }
}

export default HomeScreen

إذا كنت تبحث عن مثال عمل ، فيرجى مراجعة هذا الرابط.

باستخدام جولات متعددة

إذا كنت ترغب في الحصول على جولات متعددة (صفحات مختلفة ، وأنواع مختلفة من المستخدمين ، إلخ) ، يمكنك تمريرها في tourKey إلى useTourGuideController لإنشاء جولة مرتبطة بتلك tourKey . من المهم إذا كنت تستخدم جولة مفتاح ، لكي تتمكن من تسجيل مكونات TourGuideZone بشكل صحيح ، يجب عليك القيام بأحد شيئين. إما (1) تمر على طول tourKey إلى مكونات TourGuideZone ، أو (2) استخراج مكونات TourGuideZone من الخطاف نفسه

(1) إذا كنت ترغب في المرور على طول المسيرة

 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. إذا كنت تبحث عن مكون Tooltip مثال ، فقم بإلقاء نظرة على تطبيق تلميح الأدوات الافتراضي.

 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.