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

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

我还提供了各种选项，例如 the docs 中记录的 friction/tension，但我仍然遇到相同的错误和我'我也收到 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(); 它工作得很好，所以问题是特定于 spring 动画（这是我在视觉上想要实现的）。

我做错了什么？（我正在使用 React Native 0.61.2）

Answer 1

确保您是从 react-native 而不是 react-native-reanimated 导入 Animated。

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

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

animation

react-native

react-native-animatable