使用 Matter.js 在 React Native 中实现物体下落

背景

最近学校有个作业，用 React Native 做个游戏。我想在里面加一些物理效果，比如物体下落。如果自己写的话会比较麻烦，不如直接用现有工具。

使用 React Native 的一大好处就是，可以直接用现成的 JavaScript 库，比如物理引擎 Matter.js。

Matter.js 简介

简单来说，Matter.js 分为两部分：

• 物理引擎（Matter.Engine）：你可以创建一些物体，指定物体的属性（例如初识位置、大小、是否受重力，等等）、物体之间的相互作用（比如物体之间的连接）或者外界作用（比如点击鼠标时施加作用力），之后引擎会根据物理规律，计算这些物体在之后每一时刻的位置；
• 渲染器（Matter.Render）：你可以使用 Matter.js 提供的渲染器，方便地把这些物体绘制在 canvas 上，以便进行可视化；

在很多情况下，其实你不需要使用 Matter.js 提供的渲染器。在 HTML 中，你可以使用 p5.js 之类的库轻松实现 canvas 绘制，并且对绘制拥有更多的控制。

在 React Native 中，一般来说用 StyleSheet（相当于 CSS）实现绘制就可以了。（如果想用 canvas 的话则需要借助第三方库，且其通过 WebView 实现，可能会影响性能。）

使用 Matter.js 实现物体下落

示例代码如下：

import {
    useEffect, useState } from 'react';
import {
    View, Dimensions } from 'react-native';
import {
    Engine, Runner, Bodies, Composite} from 'matter-js';

const WINDOW_WIDTH = Dimensions