對反應本地滾動屏幕上的組件滾動的反應

當前我正在使用<ScrollView />組件處理我的項目的滾動，因爲我將只有最多三個項目，我覺得這是適當的，而不是引入了<FlatList />。此組件接收名爲collapsed和onCollapseToggle的道具，該道具用於修改傳遞給兒童的塌縮道具。我也試驗過這個孩子，它的狀態是collapsed變量，但是似乎從父母那裏修改孩子的狀態幾乎是不可能的。對反應本地滾動屏幕上的組件滾動的反應

當通過當組件通過了<ScrollView />滾動（用戶向下滾動足夠遠，該組件不再顯示在屏幕上）我想執行的是可能改變則傳遞給該collapsed值的函數項目正在呈現。這樣，如果用戶展開一個項目以查看關於它的更多信息，然後繼續向下滾動該項目，則該項目將自動摺疊，而用戶沒有通過某種形式的輸入手動關閉該項目。

我目前還不確定任何有關此方面的信息，任何幫助都將不勝感激。我將提供我正在使用的結構示例，這可能有助於某人提出解決方案。我不介意重組我的組件。

class ContentInformation extends React.Component { 
    state = { content: [ ... ] }; 

    onCollapseToggle = (index, displayed=true) => { 
    const { content } = this.state; 
    const arr = content.slice(); 
    const item = arr[index]; 
    if(!item) return; 

    if(!displayed) { 
     if(!item.collapsed) { 
     item.collapsed = true; 
     } 
    } else { 
     item.collapsed = !item.collapsed; 
    } 
    arr[index] = item; 
    this.setState({ content: arr }); 
    } 

    render() { 
    return (
     <ScrollView> 
     { this.state.content.map((content, index) => (
      <Item 
      key={content._id} 
      index={index} 
      onCollapseToggle={this.onCollapseToggle} 
      {...content} />  
     ); } 
     </ScrollView> 
    ); 
    } 
}

因此，基本上，你可以看到，我只需要弄清楚當<Item />熄滅屏幕，所以我可以打電話onCollapseToggle(index, false)自動重新摺疊部分，如果它是開放的。

來源

2017-06-11 Christian Tucker

得到這個問題對你來說有點難。你是否試圖讓物品在脫離屏幕時崩潰？無論哪種方式，請添加一個類似的句子，以便用更少的詞彙來解釋問題，所以我們很清楚 –

對我來說，你需要一個FlatList或一個ListView和ScrollView根本不支持這個用例。

的提示是在ScrollView描述：

FlatList is also handy if you want ... any number of other features it supports out of the box.

來源

2017-06-11 13:47:25 ostergaard

這是當一個項目是滾動時屏幕外，你如何可以檢測的例子。

state = { toggleDistance: 0 }  

_handleScroll({nativeEvent: {contentOffset: {y}}}) { 
    const {toggleDistance} = this.state; 
    if (y >= toggleDistance) { 
     // The item is offscreen 
    } 
} 

render() { 
    <ScrollView 
     onScroll={this._handleScroll.bind(this)}> 
     <Item 
     onLayout={({nativeEvent: {layout: {y, height}}}) => this.setState({toggleDistance: (y + height)})}/> 
     ... 
    </ScrollView> 
}

來源

2017-06-12 02:14:04 ivillamil

對反應本地滾動屏幕上的組件滾動的反應

回答

相關問題