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

Question

我正在使用一个带有后续 ListHeaderComponent 的 FlatList 作为我屏幕的根组件。我不希望它的顶部在滚动时弹跳，但我想保持底部弹跳以达到 UX'n'feel 的目的，因为 FlatList 支持无限滚动。有什么想法吗？

Answer 1

一个解决方案是监听 scroll 事件并检查是否应启用从 ScrollView 继承的 the bounces prop。请注意，我个人认为此解决方案有点矫枉过正，但它按预期工作。

您可以在以下 URL 找到完整的示例：https://snack.expo.io/SkL-L0knZ. You can preview it right in the browser and you can also try it on your mobile device with the 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>
        );
    }
}

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

How-to make React Native lists bounce only from the bottom?

react-native

react-native-listview

react-native-flatlist

react-native-scrollview