Animated.spring: RCTJSONStringify () обнаружил следующую ошибку: Неверное значение числа (NaN) в записи JSON - PullRequest
0 голосов
/ 04 ноября 2019

Я пытаюсь создать простую анимацию React Native:

const flexValueForSelected = (selected:boolean) => selected ? 2 : 1;
const [flexValue] = useState(new Animated.Value(flexValueForSelected(selected)));
useEffect(() => {
    console.log('changing ' + route.routeName + ' to ', selected)
    Animated.spring(flexValue, { toValue: flexValueForSelected(selected)}).start();
    // Animated.timing(flexValue, {duration:300, easing: Easing.linear, toValue: flexValueForSelected(selected)}).start();
}, [selected])
return <Animated.View key={route.routeName} style={{flexGrow: flexValue, ...styles.touchable}}>
            ...
       </Animated.View> 

Она находится внутри функционального компонента и запускается при каждом изменении свойства selected. Функция вызывается правильно (срабатывает каждый раз, когда selected изменяется, не запускается несколько раз или когда значение не изменяется и т. Д.), Но я получаю следующую ошибку:

RCTJSONStringify() encountered the following error: Invalid number value (NaN) in JSON write

Я также предоставил различные варианты, такие как трение / растяжение, как описано в документах , но я все еще получаю ту же ошибку и Я также получаю ошибки линтеров TypeScript независимо от того, какую комбинацию я пробую :

Argument of type '{ friction: number; tension: number; toValue: number; }' is not assignable to parameter of type 'SpringConfig'.
  Object literal may only specify known properties, and 'friction' does not exist in type 'SpringConfig'.ts(2345)

Когда я переключаюсь на линейную анимацию, например Animated.timing(flexValue, {duration:300, easing: Easing.linear, toValue: flexValueForSelected(selected)}).start();, она работает отлично, поэтому проблема связана с весенней анимацией (котораячто я визуально хочу достичь).

Что я делаю не так? (Я на React Native 0.61.2)

...