0

我是新手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 屏幕中没有任何动画代码。我只是重新调整项目组件。

{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. 我想要的是我希望每个项目都能正常工作。那么任何人都可以提出解决方案吗

4

1 回答 1

0

这是众多解决方案之一。

使用以下代码段跟踪“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。使用以下代码段

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 ），以跟踪选择了哪个项目。

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

于 2021-11-01T14:46:34.357 回答