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年經驗的反應性自由專家？通過我的網站與我聯繫！
