react native typing animation

특징

• 부드러운 움직임

• 맞춤형

• 종속성 없음

• 빠르고 가벼우며 이미지가 없습니다.

• requestAnimationFrame 사용합니다.

• React Native Web과 함께 작동

설치

• npm 사용: npm install react-native-typing-animation --save

• Yarn 사용: yarn add react-native-typing-animation

예

 import React from "react";import { TypingAnimation } from "react-native-typing-animation";class 예 확장 React.Component {
  render() {return <TypingAnimation />;
  }}

고급 예

 import React from "react";import { TypingAnimation } from "react-native-typing-animation";class 예 확장 React.Component {
  render() {return( <TypingAnimationdotColor="black"dotMargin={3}dotAmplitude={3}dotSpeed={0.15}dotRadius={2.5}dotX={12}dotY={6} />);
  }}

소품

• style (개체) - 컨테이너 스타일; 기본값은 {} 입니다

• dotColor (String) - 도트 색상; 기본값은 #000 (검은색)입니다.

• dotStyles (객체) - 도트 스타일; 기본값은 {} 입니다

• dotRadius (Integer) - 도트 반경. 기본값은 2.5 입니다.

• dotMargin (Integer) - 도트 마진, 도트 사이의 공간. 기본값은 3 입니다

• dotAmplitude (Integer) - 도트 진폭. 기본값은 3 입니다

• dotSpeed ​​(Integer) - 도트 속도, 전체 애니메이션 보기의 속도. 기본값은 0.15 입니다.

• dotY (Integer) - Dot y, 시작 y 좌표. 기본값은 6 입니다

• dotX (Integer) - 도트 x, 중앙 도트의 x 좌표. 기본값은 12 입니다.

• show (Boolean) - 가시성, 전체 애니메이션 보기가 표시되는지 여부. 기본값은 true 입니다

네이티브 웹 반응

이 라이브러리는 React Native Web에서 작동합니다. 여기에서 실제 예제를 볼 수 있으며 소스 코드는 여기에서 볼 수 있습니다. create-react-app을 사용하는 경우 반응 네이티브 별칭 문제를 방지하기 위해 라이브러리 소스 파일을 종속성으로 설치하는 대신 앱에 복사하는 것이 좋습니다. 무슨 뜻인지는 /example-rn-web 디렉토리를 참조하세요.

특허

• MIT

작가

Twitter @icookandcode로 질문을 남겨주세요!

크레딧

작업은 Nash Vail이 쓴 "간단한 삼각법을 사용하여 더 나은 로더를 만드는 방법"이라는 놀라운 기사를 기반으로 합니다.

기여자

• 데니스 무라지

기여하려면 PR을 제출하세요 :)

로드맵

• useNativeDriver 를 사용하여 requestAnimationFrame 에서 Animated 로 이동(PR 환영)

• 영재 채팅과 통합

• 단위 테스트(PR 환영)

풀어 주다

release-it 사용하여 다음을 수행합니다.

yarn run release:dry
yarn run release

변경 내역

• 애니메이션 속도를 구성할 수 있도록 허용

• 뷰의 가시성을 구성 가능하게 허용 #22