Аргумент, переданный всегда узлу, имеет неверный тип или отсутствует [реагировать-нативно-реанимирован] - PullRequest
0 голосов
/ 27 апреля 2020

Я пытаюсь реализовать реакцию-родной-реанимированный с функциональными компонентами и хуками. В моем коде ниже произошла ошибка - Reanimated: Argument passed to always node is either of wrong type or is missing. Я искал Inte rnet, но еще не нашел объяснения этой ошибки.

Может кто-нибудь сказать мне, что не так с моим кодом и как я могу это исправить? Любая мысль ценится. Спасибо!

import React, {useMemo, useState, useEffect} from 'react';
import {
  TouchableWithoutFeedback,
  Image,
  StyleSheet,
  Dimensions,
} from 'react-native';
import Animated, { Easing, stopClock } from 'react-native-reanimated';

const {
  useCode,
  block,
  set,
  Value,
  Clock,
  eq,
  clockRunning,
  not,
  cond,
  startClock,
  timing,
  interpolate,
  and,
} = Animated;

const runTiming = (clock) => {
  const state = {
    finished: new Value(0),
    position: new Value(0),
    time: new Value(0),
    frameTime: new Value(0),
  };

  const config = {
    duration: 5000,
    toValue: 1,
    easing: Easing.inOut(Easing.linear),
  };

  return block([
    // we run the step here that is going to update position
    cond(
      not(clockRunning(clock)),
      set(state.time, 0),
      timing(clock, state, config),
    ),
    cond(eq(state.finished, 1), [
      set(state.finished, 0),
      set(state.position, 0),
      set(state.frameTime, 0),
      set(state.time, 0),
    ]),
    state.position,
  ]);
}

export default function Test() {
  const [play, setPlay] = useState(false);
  const {progress, clock, isPlaying} = useMemo(
    () => ({
      progress: new Value(0),
      isPlaying: new Value(0),
      clock: new Clock(),
    }),
    [],
  );

  useEffect(() => {
    isPlaying.setValue(play ? 1 : 0);
  }, [play, isPlaying]);

  useCode(
    () =>
      block([
        cond(and(not(clockRunning(clock)), eq(isPlaying, 1)), startClock(clock)),
        cond(and(clockRunning(clock), eq(isPlaying, 0)), stopClock(clock)),
        set(progress, runTiming(clock)),
      ]),
    [progress, clock],
  );

  return (
    <TouchableWithoutFeedback
      style={styles.container}
      onPress={() => setPlay(!play)}
    >
      <Animated.View style={[styles.image, { opacity: progress }]}>
        <Image
          style={styles.image}
          source={require('image.jpg')}
          resizeMode="repeat"
        />
      </Animated.View>
    </TouchableWithoutFeedback>
  );
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...