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

Question

我正在使用FlatList和一个结果ListHeaderComponent作为我的屏幕的根组件.我不希望它的顶部在滚动上反弹,但我想保持底部弹跳以用于UX'n'feel目的,因为FlatList支持无限滚动.任何想法怎么样？

Answer 1

解决方案是监听scroll事件并检查是否应该启用从中继承的bounces道具ScrollView.请注意,我个人觉得这个解决方案有点矫枉过正,但它按预期工作.

您可以在以下URL找到完整的示例:https://snack.expo.io/SkL-L0knZ.您可以直接在浏览器中进行预览,也可以使用Expo应用程序在移动设备上进行预览.

这是结果(忘记了滞后,因为这是在浏览器中捕获的):

以下是相关的源代码:

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>
        );
    }
}