简介
react-native-shaking-text 是一款内容震动的组件，可以在 React Native 应用中使用，它可以让你的文本在指定时间内轻轻晃动，为你的应用增添一份生动感。
安装
你可以在终端中输入以下命令进行安装：
npm install react-native-shaking-text --save
使用方法
引入组件
在需要使用的页面中引入组件：
import ShakingText from 'react-native-shaking-text';
渲染组件
在页面中渲染组件：
-- -------------------- ---- -------
-------- -
------ -
----- -------------------------
------------
----------- -------
-----------------------
----------------
---------------
--
-------
-
-参数说明
ShakingText 组件支持以下参数：
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| text | string | '' | 需要震动的文本内容 |
| textStyle | object | {} | 自定义文本样式 |
| shakeTime | number | 1000 | 晃动时间间隔，单位：ms |
| shakeCount | number | 10 | 晃动次数 |
示例代码
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---------- - ---- ---------------
------ ----------- ---- ----------------------------
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
----- -
--------- ---
----------- -------
------ -------
--
---
------ ------- ----- --- ------- --------- -
-------- -
------ -
----- -------------------------
------------
----------- -------
-----------------------
----------------
---------------
--
-------
-
-
-源码分析
源码中主要包含了一个 ShakingText 组件，它是一个继承自 React.Component 的类，在组件中，我们引入了 React Native 中的 Animated 和 Easing 两个组件。在组件挂载完成后，我们通过 Animated.sequence 创建了一个动画组合，分别为向左偏移、向右偏移、向左偏移、向右偏移。然后通过 Animated.loop 创建了一个循环动画，使组件在指定时间内不断执行动画。
总结
react-native-shaking-text 提供了文本震动的效果，为 React Native 应用增添了一份生动感。通过使用本篇教程，你可以快速的学习该组件的使用方法，同时我们也对源码进行了分析，增强了对该组件的理解。通过使用该组件，你可以轻松的为你的 React Native 应用添加更多动态效果，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a0981e8991b448d7b00