Add prettier. Format.
This commit is contained in:
@@ -26,14 +26,15 @@ Component gesture owners stop propagation before a containing navigator can clai
|
||||
|
||||
```ts
|
||||
interface NativeRouteOptions {
|
||||
navigator?: string
|
||||
presentation?: 'push' | 'reveal' | 'slide' | 'fade' | 'modal' | 'sheet' | string
|
||||
parent?: RouteLocationRaw | ((route) => RouteLocationRaw)
|
||||
siblingGroup?: string
|
||||
siblingOrder?: number
|
||||
siblingHistory?: 'push' | 'replace'
|
||||
cache?: boolean | 'pin'
|
||||
gesture?: boolean | 'edge' | 'full'
|
||||
navigator?: string;
|
||||
presentation?:
|
||||
"push" | "reveal" | "slide" | "fade" | "modal" | "sheet" | string;
|
||||
parent?: RouteLocationRaw | ((route) => RouteLocationRaw);
|
||||
siblingGroup?: string;
|
||||
siblingOrder?: number;
|
||||
siblingHistory?: "push" | "replace";
|
||||
cache?: boolean | "pin";
|
||||
gesture?: boolean | "edge" | "full";
|
||||
}
|
||||
```
|
||||
|
||||
@@ -42,15 +43,17 @@ interface NativeRouteOptions {
|
||||
## Custom presentations
|
||||
|
||||
```ts
|
||||
nativeRouter.registerPresentation(definePresentation({
|
||||
name: 'scale-fade',
|
||||
axis: 'x',
|
||||
layerStyle({ role, progress }) {
|
||||
return role === 'to'
|
||||
? { opacity: progress, transform: `scale(${0.92 + progress * 0.08})` }
|
||||
: { opacity: 1 - progress * 0.4 }
|
||||
},
|
||||
}))
|
||||
nativeRouter.registerPresentation(
|
||||
definePresentation({
|
||||
name: "scale-fade",
|
||||
axis: "x",
|
||||
layerStyle({ role, progress }) {
|
||||
return role === "to"
|
||||
? { opacity: progress, transform: `scale(${0.92 + progress * 0.08})` }
|
||||
: { opacity: 1 - progress * 0.4 };
|
||||
},
|
||||
}),
|
||||
);
|
||||
```
|
||||
|
||||
Applications can call `beginInteractive()`, `updateInteractive()`, and `finishInteractive()` to drive the same transaction engine from a bespoke recognizer.
|
||||
@@ -72,16 +75,16 @@ import {
|
||||
onNativeViewEvict,
|
||||
useNativeViewActiveEffect,
|
||||
useNativeViewLifecycle,
|
||||
} from '@native-vue-router/core'
|
||||
} from "@native-vue-router/core";
|
||||
|
||||
const view = useNativeViewLifecycle()
|
||||
const view = useNativeViewLifecycle();
|
||||
|
||||
useNativeViewActiveEffect(() => {
|
||||
const timer = startPolling()
|
||||
return () => stopPolling(timer)
|
||||
})
|
||||
const timer = startPolling();
|
||||
return () => stopPolling(timer);
|
||||
});
|
||||
|
||||
onNativeViewEvict((reason) => saveDraft(view.route.value, reason))
|
||||
onNativeViewEvict((reason) => saveDraft(view.route.value, reason));
|
||||
```
|
||||
|
||||
`isActive` means the route is authoritative. `isVisible` also includes either side of an in-progress transition. Use `useNativeViewActiveEffect` for polling and other work that should pause in a cached tab, or `useNativeViewVisibleEffect` for work needed during the animation. Application data that must survive eviction belongs in an application store.
|
||||
|
||||
Reference in New Issue
Block a user