如何使React Native列表僅從底部反彈？

Question

我正在使用一個FlatList和隨後的ListHeaderComponent作爲我的屏幕的根組件。我不希望它的頂部在滾動上反彈，但我想保持底部反彈爲UX'n'feel目的，因爲FlatList支持無限滾動。 任何想法如何？

Answer 1

解決的辦法是聽取scroll事件，並檢查是否應該啓用ScrollView繼承的the bounces prop。請注意，我個人發現這個解決方案有點過分，但它按預期工作。

您可以在以下URL中找到一個完整的示例：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> 
     ); 
    } 
}