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

我正在尝试创建一个简单的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中记录的摩擦/张力,但是我仍然遇到相同的错误 ,而且我还遇到了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,toValue: flexValueForSelected(selected)}).start();可以完美运行,因此问题是弹簧动画特有的(这是我视觉上想要实现的)。

我在做什么错? (我使用的是React Native 0.61.2)

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

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

本文链接:https://www.f2er.com/3166580.html

大家都在问