reactjs - 当标题在SectionList中变得粘滞时如何获取事件？

Question

当标题粘贴在部分列表顶部时，我想更改标题的样式。所以我想要一些事件让我知道标题现在被粘住以便改变其样式。

              <SectionList
                sections={this.state.list}
                keyExtractor={(item, index) => item.id + index}
                renderItem={({ item, index }) =>
                  <CustomItem
                    title={item.name}
                    description={item.appDescription}
                  >
                  </ExpandableItem>}
                renderSectionHeader={({ section: { title, id } }) => (
                  this.state.list.length > 1 ? <View style={styles.sectionHeader} >
                    <Text style={styles.sectionHeaderTitle}>{title}</Text>
                  </View> : null
                )}
                ListHeaderComponent={() => {
                  return (<View style={{ paddingTop: 20 }} />);
                }}
            stickySectionHeadersEnabled={true}
            removeClippedSubviews={true}
              />```

Answer 1

使用动画部分列表

const AnimatedSectionList = Animated.createAnimatedComponent(SectionList);

然后捕获其偏移量，例如

const offset = new Animated.Value(0);

并在 onScroll 事件中使用它。

现在使用插值在偏移特定值更改标题样式 我在下面使用您的代码添加一个小示例，该代码通过滚动更改高度

<SectionList
            sections={this.state.list}
            keyExtractor={(item, index) => item.id + index}
onScroll={Animated.event(
        [
          {
            nativeEvent: { contentOffset: { y: offset } },
          },
        ],
        {
          useNativeDriver: true,
        }
      )}
            renderItem={({ item, index }) =>
              <CustomItem
                title={item.name}
                description={item.appDescription}
              >
              </ExpandableItem>}
            renderSectionHeader={({ section: { title, id } }) => (
              this.state.list.length > 1 ? <View style={styles.sectionHeader} >
                <Text style={styles.sectionHeaderTitle}>{title}</Text>
              </View> : null
            )}
            ListHeaderComponent={() => {
              return (<View style={{ paddingTop: 20, height: offset.interpolate({
        inputRange: [0, 30],
        outputRange: [30, 0],
      }) }} />);
            }}
        stickySectionHeadersEnabled={true}
        removeClippedSubviews={true}
          />