Una bifurcació del component de text de React Native que admet valors animats com a text

Bloc

Una bifurcació del component de text de React Native que admet valors animats com a text

Una bifurcació del component de text de React Native que admet valors animats com a text

text-animable-react-native

Una forquilla de React Native | component que admet els valors animats com a text.

Instal·lació

yarn add react-native-animateable-text npx pod-install

Ús (reanimat 2)

Utilitzeu-lo igual que un component, excepte en lloc de passar el text com a node fill, passeu-lo amb el text puntals.

import AnimateableText from 'react-native-animateable-text'; const Example: React.FC = () => { const text = useSharedValue('World'); const animatedText = useDerivedValue(() => `Hello ${text.value}`); const animatedProps = useAnimatedProps(() => { return { text: animatedText.value, }; }); return ( ; };

Ús (reanimat 1)

import AnimateableText from 'react-native-animateable-text'; const Example: React.FC = () => { const text = useMemo(() => new Animated.Value('World'), []); const animatedText = useMemo(() => concat('Hello', text)); return ( ; };

OMG, per què construiríeu això?

Volem animar nombres basats en gestos el més ràpid possible, per exemple, per a gràfics que mostrin dades financeres. Actualitzar l’estat nadiu és massa lent i no és factible per a una experiència fluida. Utilitzant createAnimatedComponent no us permet animar el text, ja que els fills de Text són nodes separats en lloc de només accessoris.

tutorial de joc de cartes unitat

La millor manera fins ara ha estat utilitzar el component de react-native-redash , que us permet representar una cadena des d'un node de text reanimat. Tanmateix, sota el capó, utilitza un i anima és value prop.

Naturalment, això inclou alguns casos avantguardistes, per exemple:

  • Parpelleig: quan canvieu els valors massa ràpidament, es pot tallar el text i mostrar una el·lipsi. El problema empitjora com més lent és el dispositiu i més congestionada és la cua de renderització. Mireu atentament aquest GIF a una velocitat de 0,2 vegades:

    rew no pot accedir al dispositiu seleccionat
  • Estil incoherent: en dissenyar un TextInput, heu d'afegir més estils per fer-lo alinear amb la resta del text. (El comportament a la captura de pantalla només es produeix a Android)

  • Manca de capacitats completes: no tots els accessoris estan disponibles. Amb Text animable, podeu utilitzar accessoris que no podeu utilitzar en una entrada de text, com selectable, dataDetectorType o onTextLayout.

Contribuint

Vegeu el guia de contribució per aprendre a contribuir al dipòsit i al flux de treball de desenvolupament.

Crèdits

Escrit per Jonny Burger per a les nostres necessitats a Axelra .

Gràcies a Axelra per patrocinar el meu temps per convertir-ho en un projecte de codi obert.

Som una agència suïssa especialitzada en React Native, que ens preocupa fins i tot pel més mínim detall.

Detalls de la descàrrega:

Autor: axelra-ag

Codi font: https://github.com/axelra-ag/react-native-animateable-text

documentació de disposició de flexió angular

#react # react-native # mobile-apps