kuito.
Começar

SplashScreen

componente
A tradução desta página não existe ou está desatualizada, por isso é mostrada em inglês. Ler em inglês

Match the native launch screen with an animated view. Use it to transition the launch artwork into your first screen.

Animate the launch logo into the app

tsx
import { Box, Show, SplashScreen, Text, motion, signal, timing } from 'kuito';

export default function App() {
  const splash = signal(true);
  const scale = motion(1);
  const opacity = motion(1);

  return (
    <Box flex={1}>
      <Text padding={16}>Home</Text>
      <Show when={splash.value}>
        <SplashScreen
          opacity={opacity}
          logo={{ scale }}
          onReady={() => {
            scale.value = timing(450).to(6);
            opacity.value = timing({ duration: 450, onEnd: () => (splash.value = false) }).to(0);
          }}
        />
      </Show>
    </Box>
  );
}

Behavior

Wait for onReady before beginning the handoff animation. Configure the source artwork in kuito.config.ts. Remove the overlay after the animation so it no longer covers the app.

Continue

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

Referência

Assinaturas

ts
({ logo, brand, onReady, children, ...props }: SplashScreenProps): React.JSX.Element

Parâmetros

NomeTipoObrigatórioDescrição
__0SplashScreenPropsSim—

Devolve

React.JSX.Element

Props: SplashScreenProps

Props (incluindo props herdadas) 99

NomeTipoObrigatórioDescrição
childrenKuitoNodeNãoLive content, drawn over the launch screen in the same window.
idstringNão—
refElementRef<ElementHandle>Não—
classProp<ClassNames>NãoClass names from a .css import or styles(): a string, or a list with falsy entries skipped, following the signals it reads.
styleStyleDeclarationsNãoStyles of this view alone, compiled at build time: CSS properties in camelCase. A value that changes must set a native prop (opacity).
onPress(event: PressEvent) => voidNão—
onPressCapture(event: PressEvent) => voidNão—
keystring | numberNão—
hiddenProp<boolean>NãoTakes the view out of layout and off screen, as CSS display: none.
paddingProp<LengthPercentage>Não—
paddingTopProp<LengthPercentage>Não—
paddingRightProp<LengthPercentage>Não—
paddingBottomProp<LengthPercentage>Não—
paddingLeftProp<LengthPercentage>Não—
widthAnimatable<SizeValue>Não—
heightAnimatable<SizeValue>Não—
minWidthProp<SizeValue>Não—
maxWidthProp<SizeValue>Não—
minHeightProp<SizeValue>Não—
maxHeightProp<SizeValue>Não—
aspectRatioProp<number>NãoWidth divided by height; sizes the missing side from the other.
positionProp<"relative" | "absolute">Não—
topProp<LengthPercentageAuto>Não—
rightProp<LengthPercentageAuto>Não—
bottomProp<LengthPercentageAuto>Não—
leftProp<LengthPercentageAuto>Não—
marginProp<LengthPercentageAuto>Não—
marginTopProp<LengthPercentageAuto>Não—
marginRightProp<LengthPercentageAuto>Não—
marginBottomProp<LengthPercentageAuto>Não—
marginLeftProp<LengthPercentageAuto>Não—
flexGrowProp<number>Não—
flexShrinkProp<number>Não—
flexBasisProp<SizeValue | "content">Não—
flexProp<number>NãoA grow factor from a zero basis, as CSS flex: n; 0 is inflexible.
alignSelfProp<"auto" | SelfAlignment>Não—
directionProp<"ltr" | "rtl">NãoThe way lines run; unset, the parent's, and the app's first language's at the root.
boxSizingProp<"border-box" | "content-box">Não—
paddingInlineStartProp<LengthPercentage>NãoPadding on the side lines start from: the left in ltr, the right in rtl.
paddingInlineEndProp<LengthPercentage>NãoPadding on the side lines end at: the right in ltr, the left in rtl.
marginInlineStartProp<LengthPercentageAuto>NãoMargin on the side lines start from: the left in ltr, the right in rtl.
marginInlineEndProp<LengthPercentageAuto>NãoMargin on the side lines end at: the right in ltr, the left in rtl.
insetInlineStartProp<LengthPercentageAuto>Nãoleft in ltr, right in rtl.
insetInlineEndProp<LengthPercentageAuto>Nãoright in ltr, left in rtl.
roleProp<Role>Não—
onAction(event: AccessibilityActionEvent) => voidNãoThe screen reader action taken, by name.
accessibleProp<boolean>NãoMakes the view one screen reader element, read as its label or its children's text.
labelProp<string>NãoWhat a screen reader says for the view.
hintProp<string>NãoWhat happens when the view is activated, read after the label.
aria-hiddenProp<boolean>NãoScreen readers skip the view and its subtree.
actionsProp<readonly AccessibilityAction[]>NãoActions a screen reader offers; onAction receives the one taken.
liveProp<"off" | "polite" | "assertive">NãoARIA's aria-live: announces changes to the view's content, on iOS too.
aria-disabledProp<boolean>Não—
aria-selectedProp<boolean>Não—
aria-checkedProp<boolean | "mixed">Não—
aria-busyProp<boolean>Não—
aria-expandedProp<boolean>Não—
aria-valueminProp<number>Não—
aria-valuemaxProp<number>Não—
aria-valuenowProp<number>Não—
aria-valuetextProp<string>Não—
gesturesreadonly Composable[]NãoThe view's gestures; several race unless composed with together or orElse.
opacityAnimatable<number>Não—
backgroundColorAnimatable<string>Não—
translateXAnimatable<number>Não—
translateYAnimatable<number>Não—
scaleAnimatable<number>Não—
scaleXAnimatable<number>Não—
scaleYAnimatable<number>Não—
rotateAnimatable<number>NãoDegrees.
transitionPartial<Record<"opacity" | "backgroundColor" | "transform" | "borderRadius" | "borderColor" | "shadow" | "width" | "height" | "all", Animation<unknown> | AnimationSpec>>NãoHow the animatable props move when they change, enter or leave, by group; a CSS transition compiles to it.
animatePartial<Record<AnimatableProps, string | number>>NãoAnimatable props whose every change moves as transition says; the first value applies at once.
enterEffectNãoWhere the view enters from: fade.and(slide.up(12)).
exitProp<Effect>NãoWhere the view leaves to; it stays on screen until it is there. The renderer gets true, and keeps the view until exited.
layoutAnimation<number>NãoHow the view moves to a new frame the layout gives it: layout={spring()}.
borderRadiusAnimatable<number>Não—
overflowProp<"visible" | "hidden" | "clip" | "scroll">Nãohidden and scroll clip; as in CSS, either lets a flex item shrink below its content.
borderWidthProp<number>Não—
borderColorAnimatable<string>Não—
shadowColorAnimatable<string>Não—
shadowRadiusAnimatable<number>Não—
shadowOffsetXAnimatable<number>Não—
shadowOffsetYAnimatable<number>Não—
backgroundGradient{ angle: number; colors: string[];}Não—
colorProp<string>Não—
sharedIdProp<string>NãoA 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).
alignItemsProp<SelfAlignment>Não—
justifyContentProp<ContentAlignment>Não—
gapProp<LengthPercentage>Não—
rowGapProp<LengthPercentage>Não—
columnGapProp<LengthPercentage>Não—
flexDirectionProp<"row" | "column" | "row-reverse" | "column-reverse">Não—
flexWrapProp<"nowrap" | "wrap" | "wrap-reverse" | "balance">Não—
flexLineCountProp<number>NãoThe minimum number of lines a wrapping container breaks into (CSS Flexbox 2).
alignContentProp<ContentAlignment>Não—
keyboardProp<{ avoid?: "none" | "padding" | "position";}>Não—
brandSplashPartPropsNão—
onReady() => voidNãoRuns once the native splash is gone and this view is what shows.
onPress — assinaturas de método

Assinaturas

ts
(event: PressEvent): void

Parâmetros

NomeTipoObrigatórioDescrição
eventPressEventSim—

Devolve

void

onPressCapture — assinaturas de método

Assinaturas

ts
(event: PressEvent): void

Parâmetros

NomeTipoObrigatórioDescrição
eventPressEventSim—

Devolve

void

onAction — assinaturas de método

Assinaturas

ts
(event: AccessibilityActionEvent): void

Parâmetros

NomeTipoObrigatórioDescrição
eventAccessibilityActionEventSim—

Devolve

void

backgroundGradient — campos aninhados

backgroundGradient campos

NomeTipoObrigatórioDescrição
anglenumberSim—
colorsstring[]Sim—
onReady — assinaturas de método

Assinaturas

ts
(): void

Parâmetros

Sem parâmetros.

Devolve

void

Gerado a partir das declarações TypeScript públicas: assinaturas, props e predefinições vêm da fonte verificada, as descrições da sua JSDoc. Nenhuma predefinição é inventada.