如何使用 react native reanimated v2 为多个条目设置动画？答案

【问题标题】：How to animate multiple entries using react native reanimated v2?如何使用 react native reanimated v2 为多个条目设置动画？
【发布时间】：2021-12-15 12:12:00
【问题描述】：

我是reanimated 的新手。我现在正在尝试恢复多个项目。

这些项目不会在加载组件的开头显示。但是当我的意图按下相应的项目时，它们会显示出来。

eg when button 1 is pressed item 1 will pop up slowly, button 2 is pressed and item 2 像这样。

我的应用中有 2 个组件

ItemsList screen 和 item component

我在 itemList 屏幕中没有任何动画代码。我只是在重新调整 item 组件。

{items.map(item => (
          <OtherItem
            key={item._id}
            item={item}
            selectedItem={selectedItem}
            setSelectedItem={setSelectedItem}
          />
        ))}

在项目组件中。我有一个sharedValue, useEffecthooks, and useState，我用它来根据用户交互进行动画处理。

项目组件

 const [selected, setSelected] = useState(false);
    const [count, setCount] = useState(1);
    
  // Animation
  const progress = useSharedValue(0);

  const reAnimatedStyle = useAnimatedStyle(() => {
    return {
      opacity: progress.value,
      transform: [{scale: progress.value}],
    };
  });

  useEffect(() => {
    progress.value = withTiming(1, {duration: 2000});
  }, [selected]);



return (
    <TouchableOpacity
          onPress={() => selectItem(item)}
          style={[
            globalStyle.pageContainer,
          ]}>
            {selected && (
                    <Animated.View
                      style={[
                        {flexDirection: 'row', alignItems: 'center'},
                        reAnimatedStyle,
                      ]}>
                      ...
                    </Animated.View>
                  )}
        </TouchableOpacity>)

正如您在代码中看到的，我的意图是当用户按下button 1 时，button 1 中的隐藏详细信息将显示出来。

但事情是只有第一次有效。我认为是因为shared value。我想要的是我希望每个项目都能正常工作。那么任何人都可以提出解决方案

【问题讨论】：

“按钮 1”在哪里？你能提供更多代码吗？或者如果您在世博小吃中提供工作代码会更好。
@MRPMOHIBURRAHMAN 我正在映射buttons。我的意思是ITEM COMPONENT 本身就是按钮，每个按钮里面都有一些隐藏的文本

标签： react-native react-native-reanimated-v2

【解决方案1】：

这是众多解决方案之一。

使用以下 sn-p 在“ItemsList 屏幕”上跟踪所选项目

const [selectedId, setSelectedId] = useState(null);
  const handleSelection = (id) => setSelectedId(id);
  return (
    <SafeAreaView style={styles.container}>
      {ITEMS.map((item) => (
        <OtherItem
          key={item._id}
          item={item}
          handleSelection={handleSelection}
          selectedId={selectedId}
        />
      ))}
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

在“ITEM COMPONENT”屏幕上，使用useEffect来更改progress.value。如果“ITEM COMPONENT”看到当前渲染的项目被选中，那么它将增加 progreass.value 1 否则它将减少到 0。使用下面的sn-p

useEffect(() => {
    if (selectedId === item._id)
      progress.value = withTiming(1, { duration: 2000 });
    else progress.value = withTiming(0, { duration: 2000 }); // un comment this line if you want to see hidden element of just one item and hide the other item
  }, [selectedId]);

还从“ITEM LIST 屏幕”向“ITEM COMPONENT”屏幕发送一个函数（在本例中为 handleSelection），以跟踪选择了哪个项目。

这是一个带有完整源代码的博览会snack。

【讨论】：