React Native: доступны параметры для пользовательского интерфейса средства выбора пузырьков? ⇐ Android

[Anonymous]

Мне нужно реализовать пользовательский интерфейс выбора пузырьков для моего приложения React Native.
Пример:
[


Возможно, это единственный похожий результат, который я найдено — о Apple Music Selector:


Я нашел в Интернете такие результаты:

• React Native Bubble Select: устарело
• React Native Physics: устарело
• React Native Game Движок: Устарел.

Я пробовал эмулировать некоторые анимации, но выглядит ужасно. Есть ли какой-нибудь физический движок для React Native, который я могу реализовать?
Я пробовал использовать Matter.js с чем-то настолько простым, но ничего не вижу:
< pre class="lang-js Prettyprint-override">

Код: Выделить всё

import React, { useEffect, useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import Matter from 'matter-js';
import { GameEngine } from 'react-native-game-engine';

const CircularButtonAnimation_Screen = () => {
const engine = useRef(null);

useEffect(() => {
console.log('Creating engine...');
engine.current = Matter.Engine.create();
console.log('Engine created:', engine.current);

const { world } = engine.current;

console.log('Creating world...');
console.log('Dimension screen:', '400 x 400');

// Crear cuerpo circular
console.log('Creating circle...');
const circle = Matter.Bodies.circle(200, 200, 25, {
isStatic: true,
});
console.log('Círcle created:', circle);

console.log('Adding circle in the world...');
Matter.World.add(world, circle);

return () => {
console.log('Cleaning world...');
// Matter.World.clear(world);
};
}, []);

return (



);
};

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'grey',
},
gameEngine: {
flex: 1,
},
});

export default CircularButtonAnimation_Screen;

Это журнал:

Код: Выделить всё

 LOG  Creating world...
LOG  Dimension screen: 400 x 400
LOG  Creating circle...
LOG  Círcle created: {"_original": {"density": 0.001, "friction": 0.1, "inertia": 2407.040215928269, "inverseInertia": 0.0004154479818752644, "invers
eMass": 0.5142834297505565, "mass": 1.9444530819999999, "restitution": 0}, "angle": 0, "anglePrev": 0, "angularSpeed": 0, "angularVelocity": 0, "area"
: 1944.4530819999998, "axes": [{"x": -0.9709182366411434, "y": -0.23941131501592125}, {"x": -0.8855293211163864, "y": -0.4645834924350539}, {"x": -0.7
48461108518164, "y": -0.6631786856012194}, {"x": -0.5679927261836174, "y": -0.8230335734358}, {"x": -0.35473926289412316, "y": -0.9349652696016757}, {
"x": -0.1204602009454297, "y": -0.9927181573781084}, {"x": 0.1204602009454297, "y": -0.9927181573781084}, {"x": 0.35473926289412316, "y": -0.934965269
6016757}, {"x": 0.5679927261836174, "y": -0.8230335734358}, {"x": 0.748461108518164, "y": -0.6631786856012194}, {"x": 0.8855293211163864, "y": -0.4645
834924350539}, {"x": 0.9709182366411434, "y": -0.23941131501592125}, {"x": 1, "y": 0}], "bounds": {"max": {"x": 224.818, "y": 225}, "min": {"x": 175.1
82, "y": 175}}, "chamfer": null, "circleRadius": 25, "collisionFilter": {"category": 1, "group": 0, "mask": 4294967295}, "constraintImpulse": {"angle"
: 0, "x": 0, "y": 0}, "deltaTime": 16.666666666666668, "density": Infinity, "events": null, "force": {"x": 0, "y": 0}, "friction": 1, "frictionAir": 0
.01, "frictionStatic": 0.5, "id": 1, "inertia": Infinity, "inverseInertia": 0, "inverseMass": 0, "isSensor": false, "isSleeping": false, "isStatic": t
rue, "label": "Circle Body", "mass": Infinity, "motion": 0, "parent": [Circular], "parts": [[Circular]], "plugin": {}, "position": {"x": 200, "y": 200
}, "positionImpulse": {"x": 0, "y": 0}, "positionPrev": {"x": 200, "y": 200}, "render": {"fillStyle": "#14151f", "lineWidth": 1, "opacity": 1, "sprite
": {"xOffset": 0.5, "xScale": 1, "yOffset": 0.5, "yScale": 1}, "strokeStyle": "#555", "visible": true}, "restitution": 0, "sleepCounter": 0, "sleepThr
eshold": 60, "slop": 0.05, "speed": 0, "timeScale": 1, "torque": 0, "totalContacts": 0, "type": "body", "velocity": {"x": 0, "y": 0}, "vertices": [{"b
ody": [Circular], "index": 0, "isInternal": false, "x": 224.818, "y": 203.013}, {"body": [Circular], "index": 1, "isInternal": false, "x": 223.375, "y
": 208.865}, {"body": [Circular], "index": 2, "isInternal": false, "x": 220.575, "y": 214.202}, {"body": [Circular], "index": 3, "isInternal": false,
"x": 216.578, "y": 218.713}, {"body": [Circular], "index": 4, "isInternal": false, "x": 211.618, "y": 222.136}, {"body": [Circular], "index": 5, "isIn
ternal": false, "x": 205.983, "y": 224.274}, {"body": [Circular], "index": 6, "isInternal": false, "x": 200, "y": 225}, {"body": [Circular], "index":
7, "isInternal": false, "x": 194.017, "y": 224.274}, {"body": [Circular], "index": 8, "isInternal": false, "x": 188.382, "y": 222.136}, {"body": [Circ
ular], "index": 9, "isInternal": false, "x": 183.422, "y": 218.713}, {"body": [Circular], "index": 10, "isInternal": false, "x": 179.425, "y": 214.202
}, {"body":  [Circular], "index": 11, "isInternal": false, "x": 176.625, "y": 208.865}, {"body": [Circular], "index": 12, "isInternal": false, "x": 175
.182, "y": 203.013}, {"body": [Circular], "index": 13, "isInternal": false, "x": 175.182, "y": 196.987}, {"body": [Circular], "index": 14, "isInternal
": false, "x": 176.625, "y": 191.135}, {"body": [Circular], "index": 15, "isInternal": false, "x": 179.425, "y": 185.798}, {"body": [Circular], "index
": 16, "isInternal": false, "x": 183.422, "y": 181.287}, {"body": [Circular], "index": 17, "isInternal": false, "x": 188.382, "y": 177.864}, {"body":
[Circular], "index": 18, "isInternal": false, "x": 194.017, "y": 175.726}, {"body": [Circular], "index": 19, "isInternal": false, "x": 200, "y": 175},
{"body": [Circular], "index": 20, "isInternal": false, "x": 205.983, "y": 175.726}, {"body": [Circular], "index": 21, "isInternal": false, "x": 211.6
18, "y": 177.864}, {"body": [Circular], "index": 22, "isInternal": false, "x": 216.578, "y": 181.287}, {"body": [Circular], "index": 23, "isInternal":
false, "x": 220.575, "y": 185.798}, {"body": [Circular], "index": 24, "isInternal": false, "x": 223.375, "y": 191.135}, {"body": [Circular], "index":
25, "isInternal": false, "x": 224.818, "y": 196.987}]}
LOG  Adding circle in the world...

Чего я ожидаю?
Дайте мне знать, как реализовать сборщик пузырьков, или подскажите, какой физический движок доступен и обновлен для большинства новая версия React Native.
Работа с:

• React Native: 0.73.5
• React-Native-Cli: 11.3.7
• matter-js: 0.19.0
• react-native-game-engine: 1.2.0

Спасибо за любую помощь

Подробнее здесь: https://stackoverflow.com/questions/781 ... -picker-ui