Я пытаюсь реализовать реакцию-родной-реанимированный с функциональными компонентами и хуками. В моем коде ниже произошла ошибка - 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>
);
};