Reanimated V2.0.0-rc.0 ошибка другого потока при использовании хуков, представленных в reanimated v2

Я использую Reaniamted v2 с выставочным проектом. Я видел много руководств в Интернете, где приведенный ниже пример работает без ошибок, но когда я пытаюсь использовать код в качестве учебной практики в своем приложении, я получаю сообщение об ошибке «Пытался синхронно вызвать функцию {inOut} из другого потока. Решение: : a) если вы хотите синхронно выполнить этот метод, отметьте его как Workletb) Если вы хотите выполнить этот метод в потоке JS, оберните его с помощью runOnJS"

Ошибка вызвана хуком withTiming(animation.value..... », помещенным в перевод x, во всех видео, которые я смотрел, использование хуков разрешено. Почему я получаю эту ошибку, если я не злоупотребляя этим?

      import { View, StyleSheet, TouchableWithoutFeedback } from 'react-native'
import React from 'react'
import Animated, {
    useSharedValue,
    useAnimatedStyle,
    withTiming,
} from 'react-native-reanimated'

const Transitions = () => {
    const animation = useSharedValue(0)

    const animationStyle = useAnimatedStyle(() => {
        return {
            transform: [
                {
                    translateX: withTiming(
                        animation.value,
                        {
                            duration: 1000,
                        },
                        () => {
                            animation.value = 0
                        }
                    ),
                },
            ],
        }
    })

    return (
        <View style={styles.container}>
            <TouchableWithoutFeedback
                onPress={() => {
                    animation.value = 200
                }}
            >
                <Animated.View style={[styles.box, animationStyle]} />
            </TouchableWithoutFeedback>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    box: {
        width: 200,
        height: 200,
        backgroundColor: '#631d94',
    },
})

также я должен упомянуть, что я просто попытался установить реанимацию в новом проекте, чтобы дать ему еще одну попытку, и я получил все следующие предупреждения.

      pm WARN deprecated xmldom@0.1.31: Deprecated due to CVE-2021-21366 resolved in 0.5.0
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
npm WARN deprecated core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm WARN deprecated core-js@1.2.7: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated deep-assign@3.0.0: Check out `lodash.merge` or `merge-options` instead.
npm WARN rm not removing /Users/hb/Desktop/React Native Projects/test2/node_modules/.bin/uuid as it wasn't installed by /Users/hb/Desktop/React Native Projects/test2/node_modules/uuid
npm WARN rm not removing /Users/hb/Desktop/React Native Projects/test2/node_modules/.bin/semver as it wasn't installed by /Users/hb/Desktop/React Native Projects/test2/node_modules/semver
npm WARN rm not removing /Users/hb/Desktop/React Native Projects/test2/node_modules/.bin/mime as it wasn't installed by /Users/hb/Desktop/React Native Projects/test2/node_modules/mime
npm WARN rm not removing /Users/hb/Desktop/React Native Projects/test2/node_modules/.bin/json5 as it wasn't installed by /Users/hb/Desktop/React Native Projects/test2/node_modules/json5

> core-js@3.9.1 postinstall /Users/hb/Desktop/React Native Projects/test2/node_modules/@expo/configure-splash-screen/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> core-js@2.6.12 postinstall /Users/hb/Desktop/React Native Projects/test2/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN react-native-reanimated@2.0.0-rc.0 requires a peer of react-native@* but none is installed. You must install peer dependencies yourself.
npm WARN react-native-reanimated@2.0.0-rc.0 requires a peer of react-native-gesture-handler@* but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-object-assign@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN expo-asset@8.2.2 requires a peer of react-native@* but none is installed. You must install peer dependencies yourself.
npm WARN expo-file-system@9.3.0 requires a peer of react-native@* but none is installed. You must install peer dependencies yourself.
npm WARN expo-error-recovery@1.4.0 requires a peer of react-native@* but none is installed. You must install peer dependencies yourself.
npm WARN @unimodules/react-native-adapter@5.7.0 requires a peer of react-native@* but none is installed. You must install peer dependencies yourself.
npm WARN expo-font@8.4.0 requires a peer of react-native@* but none is installed. You must install peer dependencies yourself.
npm WARN expo-keep-awake@8.4.0 requires a peer of react-native@* but none is installed. You must install peer dependencies yourself.
npm WARN expo-linking@2.0.1 requires a peer of react-native@* but none is installed. You must install peer dependencies yourself.
npm WARN expo-linear-gradient@8.4.0 requires a peer of react-native@* but none is installed. You must install peer dependencies yourself.
npm WARN expo-sqlite@8.5.0 requires a peer of react-native@* but none is installed. You must install peer dependencies yourself.
npm WARN expo-permissions@10.0.0 requires a peer of react-native@* but none is installed. You must install peer dependencies yourself.
npm WARN react-native-safe-area-context@3.1.9 requires a peer of react-native@* but none is installed. You must install peer dependencies yourself.
npm WARN @babel/preset-env@7.13.10 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-proposal-decorators@7.13.5 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN metro-react-native-babel-preset@0.59.0 requires a peer of @babel/core@* but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-syntax-decorators@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/helper-create-class-features-plugin@7.13.10 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-proposal-class-properties@7.13.0 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/helper-compilation-targets@7.13.10 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-proposal-export-namespace-from@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-proposal-async-generator-functions@7.13.8 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-proposal-dynamic-import@7.13.8 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-proposal-logical-assignment-operators@7.13.8 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-proposal-json-strings@7.13.8 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-proposal-nullish-coalescing-operator@7.13.8 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-proposal-numeric-separator@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-proposal-optional-catch-binding@7.13.8 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-proposal-object-rest-spread@7.13.8 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-syntax-async-generators@7.8.4 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-proposal-optional-chaining@7.13.8 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-proposal-private-methods@7.13.0 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-proposal-unicode-property-regex@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-syntax-dynamic-import@7.8.3 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-syntax-class-properties@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-syntax-export-namespace-from@7.8.3 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-syntax-json-strings@7.8.3 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-syntax-nullish-coalescing-operator@7.8.3 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-syntax-logical-assignment-operators@7.10.4 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-syntax-numeric-separator@7.10.4 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-syntax-object-rest-spread@7.8.3 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-syntax-optional-catch-binding@7.8.3 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-syntax-optional-chaining@7.8.3 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-syntax-top-level-await@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-arrow-functions@7.13.0 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-block-scoped-functions@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-async-to-generator@7.13.0 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-classes@7.13.0 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-destructuring@7.13.0 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-block-scoping@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-dotall-regex@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-duplicate-keys@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-computed-properties@7.13.0 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-exponentiation-operator@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-for-of@7.13.0 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-member-expression-literals@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-modules-amd@7.13.0 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-function-name@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-literals@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-modules-systemjs@7.13.8 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-modules-commonjs@7.13.8 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-modules-umd@7.13.0 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-named-capturing-groups-regex@7.12.13 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-object-super@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-new-target@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-parameters@7.13.0 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-property-literals@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-regenerator@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-reserved-words@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-spread@7.13.0 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-shorthand-properties@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-sticky-regex@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-typeof-symbol@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-template-literals@7.13.0 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-unicode-escapes@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN babel-plugin-polyfill-corejs2@0.1.10 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/preset-modules@0.1.4 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-unicode-regex@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN babel-plugin-polyfill-regenerator@0.1.6 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN babel-plugin-polyfill-corejs3@0.1.7 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/helper-create-regexp-features-plugin@7.12.17 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/helper-define-polyfill-provider@0.1.5 requires a peer of @babel/core@^7.4.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-proposal-export-default-from@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-syntax-export-default-from@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-syntax-flow@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-flow-strip-types@7.13.0 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-react-jsx@7.12.17 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-react-display-name@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-react-jsx-source@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-react-jsx-self@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-runtime@7.13.10 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-typescript@7.13.0 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-syntax-jsx@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-syntax-typescript@7.12.13 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/preset-typescript@7.12.17 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.

+ react-native-reanimated@2.0.0-rc.0
added 23 packages from 67 contributors, removed 619 packages and updated 467 packages in 50.707s

52 packages are looking for funding
  run `npm fund` for details

2 ответа

ФИКСИРОВАННЫЙ !

Моя проблема была ............. Я использовал npm, а не пряжу. Не мог в это поверить. Я потратил целый день на устранение этой проблемы и надеюсь, что другие люди, столкнувшиеся с этой проблемой, будут избавлены от этих мучительных часов. Я перехожу на пряжу навсегда!

Если вы используете expo и используете npm, установите пряжу и выполните следующие команды:

  • пряжа добавить react-native-reanimated@2.0.0-rc.0
  • пряжа добавить реагировать-родной-жест-обработчик
  • rm -r node_modules
  • сторож уотч-дель-аль
  • rm -fr $TMPDIR / метро-кеш
  • пряжа добавить core-js@^3
  • пряжа
  • начало экспо -c

Я запустил код и работает нормально, как вы установили и настроили реанимированный? покажите свой package.json и ваш babel.config.js

Другие вопросы по тегам