rn tourguide
v3.3.0
あなたのReactネイティブアプリのための柔軟なTourguide ！
？ウェブ可能？
（React-Native-Copilotの書き換え）
？デモWeb？
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
}チュートリアルを開始するために、 useTourGuideControllerフックからstart関数を呼び出すことができます。
function HomeScreen ( ) {
const { start } = useTourGuideController ( )
React . useEffect ( ( ) => {
start ( )
} , [ ] )
render ( ) {
// ...
}
}
export default HomeScreen作業例をお探しの場合は、このリンクをご覧ください。
複数のツアー（異なるページ、異なるユーザータイプなど）を希望する場合はtourKeyでuseTourGuideControllerに渡して、そのtourKeyに鍵をかけられているツアーを作成できます。重要なツアーを使用する場合、 TourGuideZoneコンポーネントが正しく登録するには、2つのことのいずれかを実行する必要があります。 （1） tourKeyに沿ってTourGuideZoneコンポーネントに渡すか、（2）フック自体からTourGuideZoneコンポーネントを抽出するか
（1）Tourkeyを渡したい場合
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色をカスタマイズできます - デフォルトは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年以上の経験を持つ反応フリーランスの専門家をお探しですか？私のウェブサイトから私に連絡してください！
