如何在React Native中使用动画值索引到数组中？

问题描述

在React Native中，如果我有一个Animated.Value想要设置从0到49的动画。

const animatedValue = new Animated.Value(0)
const animate = () => {
  animatedValue.setValue(0)
  Animated.timing(animatedValue,{
    tovalue:  49,duration: 1000,}).start()
}

我有一个包含50个元素的数组（例如，假设美国50个州的名称）

const states = ["Alabama",...,"Wyoming"]

我是否可以显示组件中数组的“当前”索引的值？例如，我想要这样的东西，尽管这不起作用：

<pressable onPress={animate}>
  <Text>{states[Math.floor(animatedValue)]}</Text>
</pressable>

当我按下pressable时，我希望它循环显示状态列表（以怀俄明州为准）。感觉应该有一种方法可以做到这一点，尽管我似乎找不到。

解决方法

我可以使用addListener到Animated.Value来对值进行自省

const [usState,setUsState] = React.useState("Texas")
React.useEffect(() => {
  animatedValue.addListener(({value}) => {
    const index = Math.floor(value)
    setUsState(states[index])
  })
  return () => animatedValue.removeAllListeners()
}

然后，当我致电animate()时，Text组件将遍历美国国家/地区列表。

感觉这并不理想，但是可以。

,

假设你想先给一个列表赋值

 const transformView = useRef(new Animated.ValueXY({ x: 0,y: 0 })).current;

启动后回到初始位置开始其他动画

Animated.timing(receiverRef,{
  toValue: { x: 500,y: 0 },duration: 500,useNativeDriver: true,}).start(() => {
  LayoutAnimation.spring();
  Animated.timing(receiverRef,{
    toValue: { x: 0,})
});

现在为特定的索引位置视图正确设置动画

transform: [
      {
         translateX:
                listid == indexToAnimate? transformView.x : 0,},{
         translateY:
               listid == indexToAnimate? transformView.y : 0,],