React native 反应本机，动态调整ScrollView/FlatList的ScrollIndicationSet

是否可以动态更改React Native中ScrollIndicationSet的值。我曾经尝试过使用一个变量来实现这一点，该变量会随着屏幕滚动而调整，但是我得到了一个不变的冲突

在下面的示例中，想法是在用户滚动时更改滚动视图顶部插图的位置，以便滚动条不会覆盖标题，直到标题已滚动出视图

在渲染时设置变量

返回

---

即使控制台日志检查显示变量VSScroll正在生成创建插入的编号，变量VSScroll仍会导致不变冲突。

这是可能的，但ScrollIndicationSet将无法处理本机滚动事件。但是，它将接受一个变量，因此可以接受一个状态

所以

在构造函数中创建一个状态

将监听器添加到onScroll动画事件，并将其自身的事件绑定到函数，例如handleOnScroll

然后使用该函数将所需值返回到状态。将函数放在构造函数和呈现之间

更改ScrollIndicationSet的值以包括状态

---

QED..

尽管如此，它远不是一种有效的方法。在每个滚动事件上设置状态更改不会提供良好的性能，因为整个组件将在每次更改时重新渲染。最好的方法是使用setNativeProps。当我有时间的时候，我会发布完整的代码。如果你想在这里回复，因为似乎没有其他人对这些问题感兴趣。

VSScroll = this.state.scrollY.interpolate({
            inputRange: [0, 88, 89],
            outputRange: [144, 88, 88]
        });

<Animated.ScrollView
    scrollIndicatorInsets={[VSScroll, 0, 52, 0]}
    onScroll={Animated.event([
                    { nativeEvent: {
                    contentOffset: { y: this.state.scrollY }
                    }
                }],
                { useNativeDriver: true }
            )} >

... etc.

this.state= {
    insetOffset: 140,
}

onScroll={
    Animated.event(
        [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
        { 
            listener: (event) => this.handleOnScroll(event.nativeEvent.contentOffset.y), 
            useNativeDriver: true, 
        }
    )
}

handleOnScroll = event => {
        var offset = 140 - event;
        if(event > 98){
            offset = 140 - 98
        }
        this.setState({
            insetOffset: offset
        })
    }

<Animated.ScrollView
    scrollIndicatorInsets={{top: this.state.insetOffset, left: 0, bottom: 52, right:0}}