如何使React Native列表仅从底部弹出？

Question

我使用FlatList并将结果ListHeaderComponent作为我的屏幕的根组件。我不希望它的顶部在滚动上反弹，但我想保持底部弹跳用户体验，因为FlatList支持无限滚动，所以感觉到目的。 任何想法如何？

Answer 1

解决方案是收听scroll个事件，并检查是否应启用从ScrollView继承的the bounces prop。请注意，我个人觉得这个解决方案有点过分，但它按预期工作。

您可以在以下网址找到完整的示例：https://snack.expo.io/SkL-L0knZ。您可以直接在浏览器中进行预览，也可以使用Expo app在移动设备上进行预览。

这是结果（忘记滞后，因为这是在浏览器中捕获的）：

以下是相关的源代码：

export default class App extends Component {

    constructor (props) {
        super(props);
        this.state = { bounces: false };
        this.renderHeader = this.renderHeader.bind(this);
        this._onScroll = this._onScroll.bind(this);
    }

    _onScroll (event) {
        const scrollPosition = event && event.nativeEvent && event.nativeEvent.contentOffset && event.nativeEvent.contentOffset.y;
        let newBouncesValue;

        if (scrollPosition < viewportHeight / 3) {
            newBouncesValue = false;
        } else {
            newBouncesValue = true;
        }

        if (newBouncesValue === this.state.bounces) {
            return;
        }

        this.setState({ bounces: newBouncesValue });
    }

    renderHeader () {
        const { bounces } = this.state;
        const style = [
            styles.header,
            { backgroundColor : bounces ? 'darkseagreen' : 'firebrick'}
        ];

        return (
            <Text style={style}>{ bounces ? 'CAN BOUNCE' : "WON'T BOUNCE"}</Text>
        );
    }

    renderItem ({item}) {
        return (
            <Text style={styles.row}>{item.key}</Text>
        );
    }

    render() {
        return (
            <View style={styles.container}>
                { this.renderHeader() }
                <FlatList
                    data={DUMMY_DATA}
                    renderItem={this.renderItem}
                    onScroll={this._onScroll}
                    bounces={this.state.bounces}
                    scrollEventThrottle={16}
                />
            </View>
        );
    }
}