将监听器添加到 Diff Clamp，React Native

Question

尝试在 React Native 中向 Animated Diff Clamp 添加侦听器，以允许更改几个非动画属性。

它最初执行正确，但当屏幕滚动超过其最大值属性时抛出 "illegal node" 错误。

"illegal node ID set as an input for Animated.DiffClamp"

大多数关于此的文章都已过时数年，并且建议您不能将侦听器添加到 diff clamp。但是，它确实有效（现在？），但前提是在构造函数中声明。

并非所有情况都允许它出现在那里，因为当它不在渲染内部时，它不会响应状态变化。在渲染内部它在达到最大值并抛出上面的错误之前表现良好。

Render () {

    const yHeader = Animated.diffClamp(
        this.props._yScroll.interpolate({
            inputRange: [0, 48],
            outputRange: [0, -48],
            extrapolateLeft: 'clamp',
        }),
        -48, 0)

    yHeader.addListener(
        Animated.event([{value: this.value.ySearch}], {useNativeDriver: false})
    )

    // this.value.search has been declared in the constructor as an Animated value and is waiting to receive the props. This is not the problem!
}

如果在抛出错误时仍在滚动，您可以看到如果在 console.log 中输出其当前值，它会继续正确执行，尽管 "illegal" 错误完全阻塞了屏幕。

是否可以将侦听器添加到 Diff Clamp？
如果不是，为什么 DiffClamp 在构造函数中会起作用？
这里是否有解决方法，假设第一个问题是“否”并且我没有在某个地方搞砸一些事情？

Answer 1

这解决了问题，但似乎是一个非常不必要的解决方法。

当在渲染中声明 Diff Clamp 时，我们似乎无法将侦听器 "legally" 添加到动画 Diff Clamp。（即使我们可以在控制台日志中看到它正在运行，我们也会收到覆盖屏幕的错误）
解决方案是获取 Diff Clamp 的值并将其插入到新变量中。

//

const yHeader = Animated.diffClamp(
    this.props._yScroll.interpolate({
        inputRange: [0, 48],
        outputRange: [0, -48],
        extrapolateLeft: 'clamp',
    }),
-48, 0)

const yHeader_legalised = yHeader.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 1],
})

 yHeader_legalised.addListener(
     Animated.event([{value: this.value.ySearch}], {useNativeDriver: false})
 )

PS。您将不得不在渲染的上下文中丢失 yHeader_legalised 来代替 yHeader，以便听众可以听到一些东西。

将监听器添加到 Diff Clamp，React Native

Add Listener to Diff Clamp, React Native

listener

clamp

react-native