rn tourguide
v3.3.0
Гибкий тургиид для вашего приложения React Native!
? Веб -сайт?
(переписывание реагируемого копилота)
? Демо -веб -сайт?
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 от useTourGuideController Hook:
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>
) Если вы используете несколько туров и хотели бы использовать startAtMount Prop на компоненте TourGuideProvider , пропустите цепочку тура, которую вы хотели бы начать
Вы можете настроить подсказку, передавая компонент в copilot 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 > Вы можете настроить цвет маски - по умолчанию rgba(0, 0, 0, 0.4) , передавая цветную строку в copilot Maker.
< TourGuideProvider { ... { backdropColor : 'rgba(50, 50, 100, 0.9)' } } >
// ...
</ TourGuideProvider >Вы можете локализовать этикетки:
< TourGuideProvider
{ ... {
labels : {
previous : 'Vorheriger' ,
next : 'Nächster' ,
skip : 'Überspringen' ,
finish : 'Beenden' ,
} ,
} }
>
// ...
</ TourGuideProvider > Наряду с start() , useTourGuideController передает функцию copilotEvents в компонент, чтобы помочь вам с отслеживанием учебного прогресса. Он использует Mitt под капюшоном, вы можете увидеть, насколько полный API.
Список доступных событий:
start - началось учебное пособие.stop - учебник по копированию закончился или пропустил.stepChange - следующий шаг. Проходит Step экземпляр как аргумент обработчика событий. Иногда вам необходимо предотвратить взаимодействие с приложением, пока выявляется тур, в таком случае preventOutsideInteraction предложение для вас.
default: false
< TourGuideProvider preventOutsideInteraction >
< AppContent />
</ TourGuideProvider > Проблемы и запросы на вытягивание всегда приветствуются.
Ищете реагирующий эксперт по внештату с более чем 14 -летним опытом? Свяжитесь со мной с моего сайта!
