0

概括

我在手风琴标题中有一个“箭头下拉”展览图标，我试图在按下时动画翻转 180 度，因此用户知道它可以关闭或打开。这些标头是动态呈现的；我不知道会有多少进来，因为它基于用户通过 Web 套接字 API 在其他软件中打开的对象的数量。

我让动画工作，但它动画所有图标，而不仅仅是我点击的那个。

此外，为了清楚代码是如何工作的，我使用了代码部分的 import 语句中显示的库中的手风琴组件。

我试过的

我试图效仿这种方法： React Native: Only Animate One of Some Elements

它似乎与我的问题略有不同（它们仅使用字体大小），因此我无法成功将此解决方案应用于我的代码。

我注意到在他们的代码中，他们的标签与该州的字体大小相关联。我敢肯定，这就是为什么他们的各个图标在点击时动画，而不是全部。但是，我不确定如何将这个概念应用到我的代码中。

状态包含动画值


    this.state={
      activeSections: [],
      animValue: new Animated.Value(250),
    }

  }

这是按下标题时调用的函数。

  handleSelect = () => {
    this.state.animValue._value > 250
      ? Animated.timing(this.state.animValue, {
          toValue: 250,
          duration: 500
        }).start()
      : Animated.timing(this.state.animValue, {
          toValue: 450,
          duration: 500
        }).start();
  };

这是手风琴调用的函数，用于单独呈现每个标题。IE 如果组件安装有 10 个标头，则此函数会被调用 10 次。

  _renderHeader = section => {

      let rotateAnimation = this.state.animValue.interpolate({
          inputRange: [250, 450],
          outputRange: ['0deg', '180deg']
      });
    const customStyle = {
      transform:[{rotate:rotateAnimation}]
    };

    return (
        <View style={styles.header}>
          <View style={styles.headerTextContainer}>
            <Text style={styles.headerText}>{section['title']}</Text>
              <Animated.View style={[{marginLeft: 10}, customStyle]}>
                <TouchableWithoutFeedback >
                  <Ionicons name="md-arrow-dropdown" size={20} color={EStyleSheet.value('$textColor')} />
                </TouchableWithoutFeedback>
              </Animated.View>
          </View>

        </View>
    );
  };

下面是点击标题时触发的手风琴功能。这是我启动动画功能的地方。

 _updateSections = activeSections => {
    console.log(activeSections)
    this.handleSelect()


   //unrelated code...

附加信息

我确实尝试模拟类似于小吃链接的尝试。它涉及将状态更改为：

    this.state={
      activeSections: [],
      animValue: [new Animated.Value(250),new Animated.Value(250),new Animated.Value(250),new Animated.Value(250),new Animated.Value(250),]
    }

并调整所有其他函数以处理带有数组值的输入。我还将图标的样式设置为 this.state.animValue 的 fontSize，以尝试个性化每个组件。

我在尝试过程中确实遇到了这个错误：

TypeError: TypeError: undefined is not an object (评估 '_this.state.animValue[i].interpolate')

4

1 回答 1

0

解决方案！

几个小时后，我找到了解决方案！为可能有类似问题的人发帖。

首先，您需要编辑您的状态。这允许每个图标都有自己的 Animated.Value 来使用。为了可见性，我硬编码了许多新的动画值，但对于动态分配，我将推送一个新值，然后在下面的后续步骤中分配它。

      animValue: [
        new Animated.Value(250),
        new Animated.Value(250),
        new Animated.Value(250),
        new Animated.Value(250),
        new Animated.Value(250),
        new Animated.Value(250),
        new Animated.Value(250),
      ],

现在我可以将转换分配给状态中的唯一值。这样，每个图标彼此独立。

<Animated.View key={1} style={[{marginLeft: 10}, {transform:[{rotate: this.state.animValue[i].interpolate({
        inputRange: [250, 450],
        outputRange: ['0deg', '180deg']})}]}]}>

我对 HandleSelect 函数进行了一项简单的更改。我添加了一个参数来获取索引，因此它可以选择正确的唯一动画值来制作动画。

handleSelect = (i) => {
    this.state.animValue[i]._value > 250
      ? Animated.timing(this.state.animValue[i], {
          toValue: 250,
          duration: 500
        }).start()
      : Animated.timing(this.state.animValue[i], {
          toValue: 450,
          duration: 500
        }).start();
  };

希望这可以帮助任何可能与我有同样问题的迷失灵魂！

于 2019-10-25T17:42:55.340 回答