Žiniatinklis ir React Native

Tas pats importas

Įdiekite vieną paketą ir abiejose platformose importuokite iš jo šaknies. React yra vienintelis privalomas peer; React Native yra neprivalomas peer vietinėms programoms. Nė vienai platformai nereikia provider, apvalkalo ar nustatymo kvietimo.

// Web and React Native: the same import.
import { MotionNumber, MotionList } from '@kkwaenggwari/animated-chorus';

export function Score({ points, players }) {
  return (
    <>
      <MotionNumber value={points} />
      <MotionList items={players} renderItem={(player) => player.name} />
    </>
  );
}

Kaip grojamas judesys

Žiniatinklyje komponentai grojami per Web Animations API su analitiškai imamomis spyruoklėmis, todėl nereikia įkelti animacijos bibliotekos ir nėra React perpiešimo per kadrą. React Native komponentai naudoja Animated su vietiniu driver transformacijoms ir neskaidrumui, o JS driver – tik ten, kur keičiasi išdėstymas (plotis ar aukštis).

React Native ypatumai

API tas pats; tai skirtumai, kuriuos pastebėsite įrenginyje.

• Skaičiai ir srautinis tekstas lieka tikru Text, todėl pažymėjimas, eilučių kėlimas, numberOfLines ir prieinamumas veikia kaip įprastai.
• MotionSheet ir MotionZoom atvaizduojami permatomame Modal, o juos uždaro mygtukas atgal.
• Vidiniai ScrollView sheet viduje išlaiko savo gestus; sheet velkamas už rankenos ir statinių sričių.
• MotionHold patvirtina tiesiai iš prieinamumo aktyvinimo veiksmo.
• Eilutinis MotionSwap išmatuoja naują turinį vienoje eilutėje; eilutes keliančiam turiniui naudokite inline=—.

import { Text, View } from 'react-native';
import { MotionNumber, MotionSheet } from '@kkwaenggwari/animated-chorus';

export function Wallet({ balance, open, setOpen }) {
  return (
    <View>
      <MotionNumber
        value={balance}
        intl
        locale="en-US"
        format={{ style: 'currency', currency: 'USD' }}
      />
      <MotionSheet open={open} onOpenChange={setOpen} detents={[0.5, 0.9]}>
        <Text>Recent activity</Text>
      </MotionSheet>
    </View>
  );
}

Jūsų išdėstymas lieka jūsų

Komponentai išlaiko platformos išdėstymą: teksto metrikas, eilučių kėlimą, šrifto mastelį, tėvinio elemento apribojimus ir jūsų stilius. Judesys niekada neprimeta jūsų tekstui simbolio pločio, fiksuoto teksto aukščio ar apkarpymo kaukės.

Kas kur patikrinta

Žiniatinklio elgesys tikrinamas tikrose naršyklėse. React Native elgesį dengia bendrų modelių ir imituoto atvaizdavimo variklio testai, todėl prieš leidimą patikrinkite gestus ir išdėstymą tiksliniuose įrenginiuose.