为什么 .current 和 .props 在我的 react native ref 中总是未定义？

Question

我想使用动态布局的点击事件为我的 Animated.View 设置动画。我正在像这样创建 refs

在构造函数中

this.HeadingAnimationRefs = []

然后在我的组件中

<Animated.View ref={ref => this.HeadingAnimationRefs[index] = ref}>
    <Text style={styles.boldHeading}>Hello</Text>
</Animated.View>

以及我的 onPress 方法

onPress={() => console.log('Hi ', this.HeadingAnimationRefs[index].current)}

或

onPress={() => console.log('Hi ', this.HeadingAnimationRefs[index].props)}

请告诉我 highlight/animate 查看的正确方法。我试过使用 TouchableOpacity，但以编程方式单击时它没有动画，所以我决定将它包装在 Animated.View 中，但现在我无法为 Animated.View.

设置动画

谢谢

Answer 1

我能够在不使用像这样的 refs 的情况下为视图设置动画。

在状态下，我使用一个数组来存储组件的动画参考值，然后在 onPress 方法中，我参考各自组件的索引调用了动画函数。

动画方法

  animateView = (index) => {

    Animated.timing(this.state.questionLocations[questionIndex].anim, {
      toValue: 0,
      duration: 1000,
      useNativeDriver: true,
    }).start(
      () => {
        Animated.timing(this.state.questionLocations[questionIndex].anim, {
          toValue: 1,
          duration: 1000,
          useNativeDriver: true,
        }).start()
      }
    );
  }

和onPress

onPress={() => this.animateView(index)}

最后像这样设置 Animated.View 的不透明度

<Animated.View style={{ opacity: this.state.questionLocations[questionIndex]?.anim }}>
    <Text style={styles.boldHeading}>Hello</Text>
</Animated.View>

为什么 .current 和 .props 在我的 react native ref 中总是未定义？

Why .current and .props are always undefined in my react native ref?

javascript

animation

node.js

reactjs

react-native