简介
react-native-collidable 是一个适用于 React Native 的碰撞检测库，可以方便地实现物体之间的碰撞检测。本文将介绍它的使用方法。
安装
react-native-collidable 可以使用 npm 进行安装：
npm install react-native-collidable --save
使用方法
导入
在使用 react-native-collidable 前，需要先导入该库。 导入方式如下：
import { CollidableGroup, Collidable } from 'react-native-collidable';创建组
使用 CollidableGroup 类创建组：
<CollidableGroup onCollision={this.handleCollision}>
<Collidable size={[100, 100]} position={[0, 0]} />
<Collidable size={[50, 50]} position={[100, 100]} />
</CollidableGroup>设置大小和位置
在创建 Collidable 组件时，需要设置两个属性：size 和 position。
size 属性是一个数组，包含宽度和高度两个值，单位为像素。
position 属性也是一个数组，包含 x 和 y 两个值，单位为像素。
通过设置 size 和 position 属性，可以让 Collidable 组件占据指定位置和大小。
处理碰撞事件
当碰撞检测发生时，会触发组件的 onCollision 属性所绑定的函数。
函数的参数是两个组件对象。可以通过这两个对象，获取到发生碰撞的组件的大小和位置信息，从而实现更多操作。
示例代码如下：
-- -------------------- ---- -------
----- --- ------- --------------- -
------------------------- --------- -
----------------------------- -------- ---- -------------------
-
-------- -
------ -
---------------- -----------------------------------
----------- ----------- ----- ------------- --- --
----------- ---------- ---- --------------- ----- --
------------------
--
-
-总结
以上是 react-native-collidable 的使用方法。通过该库，可以快速实现 React Native 中的碰撞检测。同时，我们也可以发现，该库的原理并不难以理解，因此可以作为一个探究碰撞检测原理的学习资料使用。
完整代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------------- ---------- - ---- --------------------------
----- --- ------- --------------- -
------------------------- --------- -
----------------------------- -------- ---- -------------------
-
-------- -
------ -
---------------- -----------------------------------
----------- ----------- ----- ------------- --- --
----------- ---------- ---- --------------- ----- --
------------------
--
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d981e8991b448e038d