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

Posted 2023-02-19

【中文标题】如何使用 react native reanimated v2 为多个条目设置动画？

【英文标题】：How to animate multiple entries using 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 本身就是按钮，每个按钮里面都有一些隐藏的文本

【参考方案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。