如何将可折叠标头和FlatList与粘性项目一起使用？

Question

我将FlatList与粘性项目一起使用，还可以。但是当我想通过动画使标题折叠（例如this）时，粘滞项无法正常工作。

有什么办法可以同时使用它们吗？ （FlatList和视差标题中的粘性项）

我尝试了本教程link1和link2 并使用FlatList的stickyHeaderIndices。

我的代码：

render() {

// Because of content inset the scroll value will be negative on iOS so bring
// it back to 0.
const scrollY = Animated.add(
    this.state.scrollY,
    Platform.OS === 'ios' ? HEADER_MAX_HEIGHT : 0,
);
const headerTranslate = scrollY.interpolate({
    inputRange: [0, HEADER_SCROLL_DISTANCE],
    outputRange: [0, -HEADER_SCROLL_DISTANCE],
    extrapolate: 'clamp',
});

const backBtn = scrollY.interpolate({
    inputRange: [0, HEADER_SCROLL_DISTANCE / 4, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
    outputRange: [0, 0, 0, 1],
    extrapolate: 'clamp',
});

const imageOpacity = scrollY.interpolate({
    inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
    outputRange: [1, 1, 0],
    extrapolate: 'clamp',
});
const imageTranslate = scrollY.interpolate({
    inputRange: [0, HEADER_SCROLL_DISTANCE],
    outputRange: [0, 100],
    extrapolate: 'clamp',
});

const titleScale = scrollY.interpolate({
    inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
    outputRange: [1, 1, 0.6],
    extrapolate: 'clamp',
});
const titleTranslate = scrollY.interpolate({
    inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
    outputRange: [0, 0, -8],
    extrapolate: 'clamp',
});

const tabY = scrollY.interpolate({
    inputRange: [0, HEADER_SCROLL_DISTANCE, HEADER_SCROLL_DISTANCE + 1],
    outputRange: [0, 0, 1]
});

return (
    <View style={styles.fill}>
        <StatusBar
            // translucent
            barStyle="light-content"
            backgroundColor="#333f5b"
        />
        <Animated.ScrollView
            style={styles.fill}
            scrollEventThrottle={1}
            onScroll={Animated.event(
                [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
                { useNativeDriver: true },
            )}
            refreshControl={
                <RefreshControl
                    refreshing={this.state.refreshing}
                    onRefresh={() => {
                        this.get_detail();
                        this.setState({
                            refreshing: true,
                            loadingComment: true,
                        });

                    }}
                    // Android offset for RefreshControl
                    progressViewOffset={HEADER_MAX_HEIGHT}
                />
            }
            // iOS offset for RefreshControl
            contentInset={{
                top: HEADER_MAX_HEIGHT,
            }}
            contentOffset={{
                y: -HEADER_MAX_HEIGHT,
            }}
        >

            {this._renderTab()}


        </Animated.ScrollView>
        <Animated.View
            pointerEvents="none"
            style={[
                styles.header,
                { transform: [{ translateY: headerTranslate }] },
            ]}
        >
            <Animated.Image
                style={[
                    styles.backgroundImage,
                    {
                        opacity: imageOpacity,
                        transform: [{ translateY: imageTranslate }],
                    },
                ]}
                source={{ uri: this.state.top_image }}
            />
        </Animated.View>
        <Animated.View
            style={[
                styles.bar,
                {
                    transform: [
                        { scale: titleScale },
                        { translateY: titleTranslate },
                    ],
                },
            ]}
        >
            <Text style={styles.title}>{this.state.title}</Text>

        </Animated.View>
        <Animated.View
            style={[
                styles.backBtn,
                {
                    opacity: backBtn,
                },
            ]}
        >

        </Animated.View>
    </View>
);}

并且FlatList在_renderListTab（）中：

<FlatList style={{ backgroundColor: '#eee'}}
    data={this.props.data}
    renderItem={this.renderItem}
    keyExtractor={item => item.title.toString()}
    stickyHeaderIndices={this.props.sticky}
    nestedScrollEnabled={true}
    ListEmptyComponent={() => <Spinner />}
  />

根据此issue，这是不可能的！

您有什么想法可以帮助我吗？