rn tourguide
v3.3.0
您的React Native应用程序灵活的Tourguide ！
？可网络？
（重写反应新的popilot）
“演示网络？
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 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如果您正在寻找一个工作示例，请查看此链接。
如果您想进行多次旅行（不同的页面，不同的用户类型等），则可以将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>
)如果您使用多次旅行，并且想在TourGuideProvider组件上使用startAtMount Prop
您可以通过将组件传递给copilot Hoc Maker来自定义工具提示。如果您正在寻找示例工具提示组件，请查看默认工具提示实现。
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 Maker来自定义蒙版颜色 - 默认为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 - 副教程已经开始。stop - Copilot教程已经结束或跳过。stepChange - 下一步触发。将Step实例作为事件处理程序参数。有时，您需要在显示巡回演出时防止用户与应用程序进行交互，在这种情况下， preventOutsideInteraction道具适合您。
default: false
< TourGuideProvider preventOutsideInteraction >
< AppContent />
</ TourGuideProvider > 总是欢迎问题和拉的请求。
寻找具有超过14年经验的反应性自由专家？通过我的网站与我联系！
