web-dev-qa-db-ja.com

React Native-ScrollViewのListViewのページネーション？

次のような単一のListViewコンポーネント内に3つのScrollViewコンポーネントがあります。

_<ScrollView>
  <Header />
  <ListView onEndReached={() => alert('load more 1')}/>
  <ListView onEndReached={() => alert('load more 2')}/>
  <ListView onEndReached={() => alert('load more 3')}/>
  <Footer />
</ScrollView>
_

Headerコンポーネントにはいくつかの共通のコンテンツがあり、3つのタブもあり、それぞれのListViewの表示をトリガーします。

問題は、onEndReached={() => alert('load more 1')}を含むListViewがアラートを実行しないため、下にスクロールしてリストビューの最後に到達しても、それ以上ロードできないことです。折り返しScrollViewを削除するとアラートが実行されますが、折り返しHeaderを削除したため、一般的なScrollViewはスクロールしません。ヘッダーはリストビューでスクロールする必要があるため、スクロールする必要があるすべてのものをScrollViewでラップしました。

重要な注意：このシナリオでは、ListViewを_renderHeader={this.header}_と一緒に使用することはできません。なぜなら、Headerはスクロールしますが、Headerがレンダリングされるたびに、共通のListViewと各ListViewの3つのタブが再レンダリングされるからです。一度。したがって、Headerごとに毎回新しいListViewを再レンダリングしても、アプリではカットされません。

この問題の解決策を探しています。ここでは、Headerがリストビューとともにスクロールし、onEndReachedが表示されているListViewに対してトリガーされます。

react-nativereact-native-listviewreact-native-scrollview
15
Wonka

3つの異なるListViewをロードする代わりに、選択されたヘッダー要素に応じて各listViewのdataSourceを変更することで、これを解決する必要があると思います。

getInitialState() {
    return {
        currentList: this.ds.cloneWithRowsAndSections(INITIAL_DATA);
    }
},
render() {
    return <ListView renderHeader={this._renderHeader} dataSource={this.state.currentList}/>
}

これを実行したくない唯一の理由は、3つのサブリストビューでスクロール位置を維持したい場合ですが、探しているリストビューを変更するには常に一番上にスクロールする必要があるため、これは役に立ちません。とにかく。

次に、あなたの_renderHeader関数は、選択したヘッダーに応じてcurrentListに異なるデータを入力するセレクターをレンダリングします。

2
frank

スタイリングでは、top：0とleft：0を使用して相対的な位置を設定できます。このように、それは上で静的なままになります。

<View>
<Header style={{position:"relative",top:0,left:0,height:30,width:Dimensions.get("window").width}} />
  <ListView />
  <ListView />
  <ListView />
 <Footer />
 </View>

Scrollviewで機能する可能性のある2番目のオプションは、3つすべてのListViewの高さを指定することです。

0
while1

ScrollView::onScrollを使用することもできますが、少しハッキーになります。リストビューのサイズを知る必要があります。

ListViewのみを使用

おそらく最善の解決策は、ListViewdataSourceとonEndReached関数で遊ぶことでしょう。

ListView::onEndReachedがトリガーされたときにデータセットを更新すると、ListViewに要素を追加できると思います。このように、ScrollViewsのListViewsでハッキーなことをする必要はありません。

0
Julien Deniau