WebView — Kuito Dokumentation

Embed a web page in a native view. Use it for hosted help, web content or a service that only offers a web interface.

Embed a hosted help page

tsx

import { WebView } from 'kuito';

export default function Help() {
  return <WebView flex={1} src="https://example.com/help" />;
}

Behavior

Give the view a bounded size. Use allowedOrigins to restrict the origins that may load. Use webViewRef for navigation and messaging; do not expose privileged app actions to arbitrary page messages.

Continue

Read Linking for a complete workflow. See the complete prop reference for types and documented defaults.

Referenz

Signaturen

(props: NativeViewProps<WebViewProps, WebViewMethods>): KuitoElement

Parameter

Name	Typ	Erforderlich	Beschreibung
`props`	`NativeViewProps<WebViewProps, WebViewMethods>`	Ja	—

Rückgabe

KuitoElement

Props: NativeViewProps<WebViewProps, WebViewMethods>

Props (einschließlich geerbter Props) 96

Name	Typ	Erforderlich	Beschreibung
`opacity`	`Animatable<number>`	Nein	—
`backgroundColor`	`Animatable<string>`	Nein	—
`borderRadius`	`Animatable<number>`	Nein	—
`borderColor`	`Animatable<string>`	Nein	—
`width`	`Animatable<SizeValue>`	Nein	—
`height`	`Animatable<SizeValue>`	Nein	—
`translateX`	`Animatable<number>`	Nein	—
`translateY`	`Animatable<number>`	Nein	—
`scale`	`Animatable<number>`	Nein	—
`scaleX`	`Animatable<number>`	Nein	—
`scaleY`	`Animatable<number>`	Nein	—
`rotate`	`Animatable<number>`	Nein	Degrees.
`shadowColor`	`Animatable<string>`	Nein	—
`shadowRadius`	`Animatable<number>`	Nein	—
`shadowOffsetX`	`Animatable<number>`	Nein	—
`shadowOffsetY`	`Animatable<number>`	Nein	—
`hidden`	`Prop<boolean>`	Nein	Takes the view out of layout and off screen, as CSS `display: none`.
`padding`	`Prop<LengthPercentage>`	Nein	—
`position`	`Prop<"relative" \| "absolute">`	Nein	—
`id`	`string`	Nein	—
`class`	`Prop<ClassNames>`	Nein	Class names from a .css import or styles(): a string, or a list with falsy entries skipped, following the signals it reads.
`style`	`StyleDeclarations`	Nein	Styles of this view alone, compiled at build time: CSS properties in camelCase. A value that changes must set a native prop (`opacity`).
`key`	`string \| number`	Nein	—
`paddingTop`	`Prop<LengthPercentage>`	Nein	—
`paddingRight`	`Prop<LengthPercentage>`	Nein	—
`paddingBottom`	`Prop<LengthPercentage>`	Nein	—
`paddingLeft`	`Prop<LengthPercentage>`	Nein	—
`minWidth`	`Prop<SizeValue>`	Nein	—
`maxWidth`	`Prop<SizeValue>`	Nein	—
`minHeight`	`Prop<SizeValue>`	Nein	—
`maxHeight`	`Prop<SizeValue>`	Nein	—
`aspectRatio`	`Prop<number>`	Nein	Width divided by height; sizes the missing side from the other.
`top`	`Prop<LengthPercentageAuto>`	Nein	—
`right`	`Prop<LengthPercentageAuto>`	Nein	—
`bottom`	`Prop<LengthPercentageAuto>`	Nein	—
`left`	`Prop<LengthPercentageAuto>`	Nein	—
`margin`	`Prop<LengthPercentageAuto>`	Nein	—
`marginTop`	`Prop<LengthPercentageAuto>`	Nein	—
`marginRight`	`Prop<LengthPercentageAuto>`	Nein	—
`marginBottom`	`Prop<LengthPercentageAuto>`	Nein	—
`marginLeft`	`Prop<LengthPercentageAuto>`	Nein	—
`flexGrow`	`Prop<number>`	Nein	—
`flexShrink`	`Prop<number>`	Nein	—
`flexBasis`	`Prop<SizeValue \| "content">`	Nein	—
`flex`	`Prop<number>`	Nein	A grow factor from a zero basis, as CSS `flex: n`; 0 is inflexible.
`alignSelf`	`Prop<"auto" \| SelfAlignment>`	Nein	—
`direction`	`Prop<"ltr" \| "rtl">`	Nein	The way lines run; unset, the parent's, and the app's first language's at the root.
`boxSizing`	`Prop<"border-box" \| "content-box">`	Nein	—
`paddingInlineStart`	`Prop<LengthPercentage>`	Nein	Padding on the side lines start from: the left in `ltr`, the right in `rtl`.
`paddingInlineEnd`	`Prop<LengthPercentage>`	Nein	Padding on the side lines end at: the right in `ltr`, the left in `rtl`.
`marginInlineStart`	`Prop<LengthPercentageAuto>`	Nein	Margin on the side lines start from: the left in `ltr`, the right in `rtl`.
`marginInlineEnd`	`Prop<LengthPercentageAuto>`	Nein	Margin on the side lines end at: the right in `ltr`, the left in `rtl`.
`insetInlineStart`	`Prop<LengthPercentageAuto>`	Nein	`left` in `ltr`, `right` in `rtl`.
`insetInlineEnd`	`Prop<LengthPercentageAuto>`	Nein	`right` in `ltr`, `left` in `rtl`.
`role`	`Prop<Role>`	Nein	—
`onAction`	`(event: AccessibilityActionEvent) => void`	Nein	The screen reader action taken, by `name`.
`accessible`	`Prop<boolean>`	Nein	Makes the view one screen reader element, read as its label or its children's text.
`label`	`Prop<string>`	Nein	What a screen reader says for the view.
`hint`	`Prop<string>`	Nein	What happens when the view is activated, read after the label.
`aria-hidden`	`Prop<boolean>`	Nein	Screen readers skip the view and its subtree.
`actions`	`Prop<readonly AccessibilityAction[]>`	Nein	Actions a screen reader offers; `onAction` receives the one taken.
`live`	`Prop<"off" \| "polite" \| "assertive">`	Nein	ARIA's `aria-live`: announces changes to the view's content, on iOS too.
`aria-disabled`	`Prop<boolean>`	Nein	—
`aria-selected`	`Prop<boolean>`	Nein	—
`aria-checked`	`Prop<boolean \| "mixed">`	Nein	—
`aria-busy`	`Prop<boolean>`	Nein	—
`aria-expanded`	`Prop<boolean>`	Nein	—
`aria-valuemin`	`Prop<number>`	Nein	—
`aria-valuemax`	`Prop<number>`	Nein	—
`aria-valuenow`	`Prop<number>`	Nein	—
`aria-valuetext`	`Prop<string>`	Nein	—
`gestures`	`readonly Composable[]`	Nein	The view's gestures; several race unless composed with together or orElse.
`transition`	`Partial<Record<"opacity" \| "backgroundColor" \| "transform" \| "borderRadius" \| "borderColor" \| "shadow" \| "width" \| "height" \| "all", Animation<unknown> \| AnimationSpec>>`	Nein	How the animatable props move when they change, enter or leave, by group; a CSS `transition` compiles to it.
`animate`	`Partial<Record<AnimatableProps, string \| number>>`	Nein	Animatable props whose every change moves as `transition` says; the first value applies at once.
`enter`	`Effect`	Nein	Where the view enters from: `fade.and(slide.up(12))`.
`exit`	`Prop<Effect>`	Nein	Where the view leaves to; it stays on screen until it is there. The renderer gets `true`, and keeps the view until `exited`.
`layout`	`Animation<number>`	Nein	How the view moves to a new frame the layout gives it: `layout={spring()}`.
`overflow`	`Prop<"visible" \| "hidden" \| "clip" \| "scroll">`	Nein	hidden and scroll clip; as in CSS, either lets a flex item shrink below its content.
`borderWidth`	`Prop<number>`	Nein	—
`backgroundGradient`	`{ angle: number; colors: string[];}`	Nein	—
`color`	`Prop<string>`	Nein	—
`sharedId`	`Prop<string>`	Nein	A view the navigation stack flies to the view with the same sharedId on the screen it pushes or pops to (docs/navigation.md#shared-elements).
`ref`	`ElementRef<NativeViewHandle<WebViewMethods>>`	Nein	—
`src`	`Bound<WebViewSource>`	Nein	The page to load. Set `src` or `html`, not both.
`html`	`Bound<string \| { html: string; baseUrl?: string;}>`	Nein	Inline HTML, resolved against `baseUrl` when given.
`allowedOrigins`	`Bound<string[]>`	Nein	Origins the WebView navigates to, as wildcard patterns (`https://`). The main frame's navigations elsewhere open through Linking instead. `["http://", "https://*"]` by default.
`injectedJavaScript`	`Bound<string>`	Nein	Runs in the main frame each time a document finishes loading.
`javaScriptEnabled`	`Bound<boolean>`	Nein	True by default.
`swipeNavigation`	`Bound<boolean>`	Nein	iOS only: swipe from an edge to go back or forward. False by default.
`userAgent`	`Bound<string>`	Nein	Replaces the platform's user agent.
`onLoadStart`	`(event: WebViewNavigationEvent) => void`	Nein	—
`onLoad`	`(event: WebViewNavigationEvent) => void`	Nein	The page loaded.
`onLoadEnd`	`(event: WebViewNavigationEvent) => void`	Nein	The load ended, loaded or failed.
`onError`	`(event: WebViewErrorEvent) => void`	Nein	—
`onNavigate`	`(event: WebViewNavigationEvent) => void`	Nein	The URL, title, loading state or history changed.
`onMessage`	`(event: WebViewMessageEvent) => void`	Nein	—

onAction — Methodensignaturen

Signaturen

(event: AccessibilityActionEvent): void

Parameter

Name	Typ	Erforderlich	Beschreibung
`event`	`AccessibilityActionEvent`	Ja	—

Rückgabe

void

backgroundGradient — verschachtelte Felder

backgroundGradient Felder

Name	Typ	Erforderlich	Beschreibung
`angle`	`number`	Ja	—
`colors`	`string[]`	Ja	—

onLoadStart — Methodensignaturen

Signaturen

(event: WebViewNavigationEvent): void

Parameter

Name	Typ	Erforderlich	Beschreibung
`event`	`WebViewNavigationEvent`	Ja	—

Rückgabe

void

onLoad — Methodensignaturen

Signaturen

(event: WebViewNavigationEvent): void

Parameter

Name	Typ	Erforderlich	Beschreibung
`event`	`WebViewNavigationEvent`	Ja	—

Rückgabe

void

onLoadEnd — Methodensignaturen

Signaturen

(event: WebViewNavigationEvent): void

Parameter

Name	Typ	Erforderlich	Beschreibung
`event`	`WebViewNavigationEvent`	Ja	—

Rückgabe

void

onError — Methodensignaturen

Signaturen

(event: WebViewErrorEvent): void

Parameter

Name	Typ	Erforderlich	Beschreibung
`event`	`WebViewErrorEvent`	Ja	—

Rückgabe

void

onNavigate — Methodensignaturen

Signaturen

(event: WebViewNavigationEvent): void

Parameter

Name	Typ	Erforderlich	Beschreibung
`event`	`WebViewNavigationEvent`	Ja	—

Rückgabe

void

onMessage — Methodensignaturen

Signaturen

(event: WebViewMessageEvent): void

Parameter

Name	Typ	Erforderlich	Beschreibung
`event`	`WebViewMessageEvent`	Ja	—

Rückgabe

void

Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.

#Embed a hosted help page

#Behavior

#Continue

Referenz

Signaturen

Parameter

Rückgabe

Props (einschließlich geerbter Props) 96

Signaturen

Parameter

Rückgabe

backgroundGradient Felder

Signaturen

Parameter

Rückgabe

Signaturen

Parameter

Rückgabe

Signaturen

Parameter

Rückgabe

Signaturen

Parameter

Rückgabe

Signaturen

Parameter

Rückgabe

Signaturen

Parameter

Rückgabe

Embed a hosted help page

Behavior

Continue