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

【问题标题】：Why .current and .props are always undefined in my react native ref?为什么 .current 和 .props 在我的 react native ref 中总是未定义？
【发布时间】：2022-01-30 00:00:27
【问题描述】：

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

在构造函数中

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)}

请告诉我突出显示/动画视图的正确方法。我尝试过使用 TouchableOpacity，但以编程方式单击它时没有动画，所以我决定将它包装在 Animated.View 中，但现在我无法为 Animated.View 设置动画。

谢谢

【问题讨论】：

标签： javascript node.js reactjs react-native animation

【解决方案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>

【讨论】：