Как мне решить: «Чтение из _value напрямую возможно только во время выполнения пользовательского интерфейса» в Reanimate ⇐ Android

[Anonymous]

Я разрабатываю приложение на React Native, которое использует API PoseDetection от Google ML Kit.
Это проект для моего университета.
Вот мой package.json:

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

"dependencies": {
"metro-react-native-babel-preset": "^0.77.0",
"react": "18.2.0",
"react-native": "0.73.6",
"react-native-gesture-handler": "^2.14.0",
"react-native-reanimated": "^3.6.2",
"react-native-svg": "^15.3.0",
"react-native-vision-camera": "^4.0.5",
"react-native-worklets-core": "^1.3.3"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-transform-private-methods": "^7.24.7",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native/babel-preset": "0.74.84",
"@react-native/eslint-config": "0.74.84",
"@react-native/metro-config": "0.74.84",
"@react-native/typescript-config": "0.74.84",
"@types/react": "^18.2.6",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.6.3",
"eslint": "^8.19.0",
"jest": "^29.6.3",
"prettier": "2.8.8",
"react-test-renderer": "18.2.0",
"typescript": "5.0.4"
},

И мой App.tsx:

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

import React, { useEffect } from 'react';
import { Dimensions, Platform, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
import { Camera, useFrameProcessor, useCameraDevice } from 'react-native-vision-camera';
import Animated, { useSharedValue, useAnimatedProps, useAnimatedStyle } from 'react-native-reanimated';
import Svg, { Line } from 'react-native-svg';
import { __poseDetection } from './FrameProcessorPlugin';
import 'react-native-worklets-core';

const AnimatedLine = Animated.createAnimatedComponent(Line);

const usePosition = (pose, valueName1, valueName2) => {
return useAnimatedProps(
() => ({
x1: pose.value[valueName1].x,
y1: pose.value[valueName1].y,
x2: pose.value[valueName2].x,
y2: pose.value[valueName2].y,
}),
[pose],
);
};

export function objectDetect(frame) {
'worklet';
return __poseDetection(frame);
}

const defaultPose = {
leftShoulder: { x: 0, y: 0 },
rightShoulder: { x: 0, y: 0 },
leftElbow: { x: 0, y: 0 },
rightElbow: { x: 0, y: 0 },
leftWrist: { x: 0, y: 0 },
rightWrist: { x: 0, y: 0 },
leftHip: { x: 0, y: 0 },
rightHip: { x: 0, y: 0 },
leftKnee: { x: 0, y: 0 },
rightKnee: { x: 0, y: 0 },
leftAnkle: { x: 0, y: 0 },
rightAnkle: { x: 0, y: 0 },
};

const App = () => {
const pose = useSharedValue(defaultPose);

const leftWristToElbowPosition = usePosition(pose, 'leftWrist', 'leftElbow');
const leftElbowToShoulderPosition = usePosition(pose, 'leftElbow', 'leftShoulder');
const leftShoulderToHipPosition = usePosition(pose, 'leftShoulder', 'leftHip');
const leftHipToKneePosition = usePosition(pose, 'leftHip', 'leftKnee');
const leftKneeToAnklePosition = usePosition(pose, 'leftKnee', 'leftAnkle');

const rightWristToElbowPosition = usePosition(pose, 'rightWrist', 'rightElbow');
const rightElbowToShoulderPosition = usePosition(pose, 'rightElbow', 'rightShoulder');
const rightShoulderToHipPosition = usePosition(pose, 'rightShoulder', 'rightHip');
const rightHipToKneePosition = usePosition(pose, 'rightHip', 'rightKnee');
const rightKneeToAnklePosition = usePosition(pose, 'rightKnee', 'rightAnkle');

const shoulderToShoulderPosition = usePosition(pose, 'leftShoulder', 'rightShoulder');
const hipToHipPosition = usePosition(pose, 'leftHip', 'rightHip');

const dimensions = useWindowDimensions();

const frameProcessor = useFrameProcessor((frame) =>  {
'worklet';
const poseObject = objectDetect(frame);

const xFactor = dimensions.width / frame.width;
const yFactor = dimensions.height / frame.height;

const poseCopy = {
leftShoulder: { x: 0, y: 0 },
rightShoulder: { x: 0, y: 0 },
leftElbow: { x: 0, y: 0 },
rightElbow: { x: 0, y: 0 },
leftWrist: { x: 0, y: 0 },
rightWrist: { x: 0, y: 0 },
leftHip: { x: 0, y: 0 },
rightHip: { x: 0, y: 0 },
leftKnee: { x: 0, y: 0 },
rightKnee: { x: 0, y: 0 },
leftAnkle: { x: 0, y: 0 },
rightAnkle: { x: 0, y: 0 },
};

Object.keys(poseObject).forEach((v) => {
poseCopy[v] = {
x: poseObject[v].x * xFactor,
y: poseObject[v].y * yFactor,
};
});

pose.value = poseCopy;
}, []);

const device = useCameraDevice('back');

useEffect(() => {
const checkPermissions = async () => {
await Camera.requestCameraPermission();
};
checkPermissions();
}, []);

if (device == null) {
return Loading...;
}

return (

















);
};

const styles = StyleSheet.create({
linesContainer: {
position: 'absolute',
top: 0,
left: 0,
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
},
});

export default App;

Сейчас мне нужно, чтобы приложение просто запускало камеру и показывало мне анимированные линии, чтобы я знал, что распознавание позы работает. Но я получаю следующую ошибку:


Я не понимаю большую часть синтаксиса React и Reanimated. Как мне решить эту проблему?
Если вам нужна дополнительная информация, дайте мне знать.
Я проверил похожие проблемы с GitHub и StackOF, но все они были вызваны неправильным импортом. Судя по решениям, с моим все в порядке.
Как я уже сказал, я не понимаю большую часть синтаксиса, поэтому позволил ChatGPT изменить код несколько раз. Но каждая версия вызывает одну и ту же ошибку.
Я проверил веб-сайт Reanimated в разделе устранения неполадок. Моей ошибки там нет.

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