反応したネイティブのScrollViewで画面からスクロールしているコンポーネントに反応する

Question

現在、<ScrollView />コンポーネントを使用してアイテムのスクロールを処理しています。 <FlatList />を紹介します。このコンポーネントは、collapsedおよびonCollapseToggleという小道具を受け取り、子供に渡される倒壊小道具を修正するために使用されます。私は子供がそれを持っていることを実験しましたcollapsed州で変数が、子供の状態を親から変更することはほぼ不可能に近いようです。

成分が、（ユーザーがスクロールは、コンポーネントは、もはや画面上に表示されていることを十分に遠く下）に渡されたとき、私は潜在的に渡されますcollapsed値を変えることができる機能を実行したい<ScrollView />スクロールアイテムがレンダリングされます。このようにしてユーザーが項目を展開して詳細情報を表示した後、スクロールし続けると、項目が自己崩壊することがあります。ユーザーは何らかの入力を手動で閉じる必要はありません。

私は現在、この問題についてどのような対応をとっているのか分からず、助けていただければ幸いです。私が作業している構造の例を提供します。これは、誰かが解決策を考え出すのを助けるかもしれません。私は自分のコンポーネントを再構築しても構いません。あなたが見ることができるように私はそれが開いている場合、自動的にコンポーネントを再崩壊しonCollapseToggle(index, false)を呼び出すことができるように

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 />がオフスクリーンになったときを把握する必要があります。

Answer 1

FlatListまたはListViewが必要な場合、ScrollViewはこのユースケースをサポートしていません。

ヒントはScrollView説明である：

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

Answer 2

これはアイテムがスクロール時に画面外であるときに検出することができます方法の例です。

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