如何在React Native中创建旋转圆

Question

我想在本机反应中创建一个旋转圆。我可以找到一个纯粹的 javascript 来做到这一点：

https://codepen.io/adadsa/pen/QEzbak

但我不知道如何在我的 React Native 项目中使用此代码。

这是所有 JavaScript 代码：

circle('layer-1');

            function circle(id) {

                var el = document.getElementById(id);

                var elDisplay = el.children[0];
                var elInteraction = el.children[1];

                var offsetRad = null;
                var targetRad = 0;
                var previousRad;


                try {
                    elInteraction.addEventListener('mousedown', down);
                }
                catch (err) {
                    console.log("Interaction not found");
                }

                function down(event) {
                    offsetRad = getRotation(event);
                    previousRad = offsetRad;
                    window.addEventListener('mousemove', move);
                    window.addEventListener('mouseup', up);
                }

                function move(event) {

                    var newRad = getRotation(event);
                    targetRad += (newRad - previousRad);
                    previousRad = newRad;
                    elDisplay.style.transform = 'rotate(' + (targetRad / Math.PI * 180) + 'deg)';
                }

                function up() {
                    window.removeEventListener('mousemove', move);
                    window.removeEventListener('mouseup', up);
                }

                function getRotation(event) {
                    var pos = mousePos(event, elInteraction);
                    var x = pos.x - elInteraction.clientWidth * .5;
                    var y = pos.y - elInteraction.clientHeight * .5;
                    return Math.atan2(y, x);
                }

                function mousePos(event, currentElement) {
                    var totalOffsetX = 0;
                    var totalOffsetY = 0;
                    var canvasX = 0;
                    var canvasY = 0;

                    do {
                        totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
                        totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
                    }
                    while (currentElement = currentElement.offsetParent)

                    canvasX = event.pageX - totalOffsetX;
                    canvasY = event.pageY - totalOffsetY;

                    return {
                        x: canvasX,
                        y: canvasY
                    };
                }
            }

是否可以在 React Native 中使用此代码，或者我必须转换它们？

Answer 1

使用CSS让你的组件旋转360度。CSS代码可以在网上找到，你只需要搜索它即可。不要使用js来做到这一点 我为你找到了一个 CSS 代码

here

Answer 2

我最近遇到了类似的问题，找不到合适的包。因此，我开发了一个库来使用 Reanimated 和 React-native-gesture-handler 来解决这个问题。

您可以在这里找到该库：react-native-circular-layout。