Animated.spring:RCTJSONStringify()遇到以下错误:JSON写入中的数值(NaN)无效

Question

我正在尝试创建一个简单的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 linter错误:

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上(

Answer 1

确保从react-native而非react-native-reanimated导入Animated。