react native typing animation

特征

• 运动平稳

• 可定制

• 无依赖关系

• 快速、轻量且无图像

• 使用requestAnimationFrame

• 与 React Native Web 一起使用

安装

• 使用 npm： npm install react-native-typing-animation --save

• 使用纱线： yarn add react-native-typing-animation

例子

从“react”导入React;从“react-native-typing-animation”导入{TypingAnimation};类示例扩展React.Component {
  渲染（）{返回<TypingAnimation />;
  }}

高级示例

从“react”导入React;从“react-native-typing-animation”导入{TypingAnimation};类示例扩展React.Component {
  render() {return ( <TypingAnimationdotColor="black"dotMargin={3}dotAmplitude={3}dotSpeed={0.15}dotRadius={2.5}dotX={12}dotY={6} />);
  }}

道具

• style (Object) - 容器样式；默认为{}

• dotColor (String) - 点颜色；默认为#000 （黑色）

• dotStyles (Object) - 点样式；默认为{}

• dotRadius (Integer) - 点半径；默认值为2.5

• dotMargin (Integer) - 点边距，点之间的空间；默认值为3

• dotAmplitude (Integer) - 点幅度；默认值为3

• dotSpeed (Integer) - 点速度，整个动画视图的速度；默认值为0.15

• dotY (Integer) - 点 y，起始 y 坐标；默认值为6

• dotX (Integer) - 点x，中心点的x坐标；默认值为12

• show (Boolean) - 可见性，是否显示整个动画视图；默认为true

反应本机网络

该库与 React Native Web 配合使用。您可以在此处查看工作示例，并在此处提供源代码。如果您使用 create-react-app ，可能值得将库源文件复制到您的应用程序中，而不是将其安装为依赖项，以避免反应本机别名问题。请参阅/example-rn-web目录了解我的意思。

执照

• 麻省理工学院

作者

请随时在 Twitter @icookandcode 上向我提问！

制作人员

工作基于 Nash Vail 撰写的精彩文章“如何使用简单的三角学来创建更好的装载机”

贡献者

• 丹尼斯·穆拉奇

提交 PR 来做出贡献:)

路线图

• 使用useNativeDriver从requestAnimationFrame移动到Animated （欢迎 PR）

• 与天才聊天集成

• 单元测试（欢迎 PR）

发布

我们使用release-it来发布，执行以下操作：

yarn run release:dry
yarn run release

变更日志

• 允许配置动画速度

• 允许视图的可见性可配置 #22