React-native-reanimated：有没有办法在滚动时从 dom 中删除组件而不是用样式隐藏它？答案

【问题标题】：React-native-reanimated: is there a way to remove a component from the dom when scrolling rather than hide it with style?React-native-reanimated：有没有办法在滚动时从 dom 中删除组件而不是用样式隐藏它？
【发布时间】：2023-02-07 08:52:58
【问题描述】：

我可以使用 useAnimatedStyle 隐藏一个 react-native 元素，并返回一个我可以应用于我的元素的样式，例如 opacity: 0。

但我找不到任何方法从 dom 中删除元素。使用

const handleScroll = useAnimatedScrollHandler(
  {
    onScroll(event) {
      currentPositionY.value = withTiming(event.contentOffset.y, {
        duration: 10,
      });
    },
  },
  []
);

我只能在 useAnimatedStyle 中检索 currentPositionY 的值，但我想找到一种方法直接在渲染部分执行此操作，例如：

{currentPositionY > 50 ? <MyComponent/> : null}

有没有办法做到这一点？

【问题讨论】：

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

【解决方案1】：

尝试 useAnimatedReaction 挂钩。

创建一个状态来控制元素在 DOM 中的可见性
使用 useAnimatedReaction 挂钩，并将您的 sharedValue 作为依赖项传递
在挂钩内，根据您的逻辑将可见性状态设置为 false。

【讨论】：