rn tourguide
v3.3.0
React Native 앱을위한 유연한 투어 가이드 !
? 웹에?
(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 <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 Props :
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
} 튜토리얼을 시작하려면 useTourGuideController hook에서 start 함수를 호출 할 수 있습니다.
function HomeScreen ( ) {
const { start } = useTourGuideController ( )
React . useEffect ( ( ) => {
start ( )
} , [ ] )
render ( ) {
// ...
}
}
export default HomeScreen작업 예제를 찾고 있다면이 링크를 확인하십시오.
여러 투어 (다른 페이지, Different 사용자 유형 등)를 원한다면 tourKey 를 사용하여 useTourGuideController 로 전달하여 해당 tourKey 에 기반을 둔 투어를 만들 수 있습니다. 중요한 투어를 사용하는 경우 TourGuideZone 구성 요소가 올바르게 등록하려면 두 가지 중 하나를 수행 해야합니다 . (1) tourKey 따라 TourGuideZone 구성 요소로 전달하거나 (2) Hook 자체에서 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>
) 여러 투어를 사용하고 TourGuideProvider 구성 요소에서 startAtMount Prop을 사용하려면 시작하려는 투어의 문자열을 통과하십시오.
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 > 마스크 색상을 사용자 정의 할 수 있습니다 - 기본값은 copilot Hoc 메이커에게 색상 문자열을 전달하여 rgba(0, 0, 0, 0.4) 입니다.
< TourGuideProvider { ... { backdropColor : 'rgba(50, 50, 100, 0.9)' } } >
// ...
</ TourGuideProvider >라벨을 현지화 할 수 있습니다.
< TourGuideProvider
{ ... {
labels : {
previous : 'Vorheriger' ,
next : 'Nächster' ,
skip : 'Überspringen' ,
finish : 'Beenden' ,
} ,
} }
>
// ...
</ TourGuideProvider > start() 와 함께 useTourGuideController copilotEvents 기능을 구성 요소로 전달하여 튜토리얼 진행 상황을 추적하는 데 도움이됩니다. 그것은 후드 아래에서 미트를 사용하여 API가 얼마나 완전한 지 알 수 있습니다.
사용 가능한 이벤트 목록은 다음과 같습니다.
start - Copilot 튜토리얼이 시작되었습니다.stop - Copilot 튜토리얼이 종료되거나 건너 뜁니다.stepChange - 다음 단계가 트리거됩니다. Step 인스턴스를 이벤트 핸들러 인수로 전달합니다. 투어가 표시되는 동안 사용자가 앱과 상호 작용하는 것을 방지 해야하는 경우가 있습니다.이 경우 preventOutsideInteraction Prop이 귀하에게 적용됩니다.
default: false
< TourGuideProvider preventOutsideInteraction >
< AppContent />
</ TourGuideProvider > 문제와 풀 요청은 항상 환영합니다.
14 년 이상의 경험을 가진 리포진 프리랜서 전문가를 찾고 계십니까? 내 웹 사이트에서 저에게 연락하십시오!
