問題タブ [react-native-listview]

初期の DataSource を取得する ListView があります。その後、ユーザーは検索を実行して、ListView を新しい DataSource で更新できます。残念ながら、これが発生すると、スクロール位置がリセットされますが、これは理想的ではありません。

新しいものを作成する代わりに、同じ ListView.DataSource オブジェクトを再利用しようとしましたが、同じ結果が得られました。

dataSource が変更された後、ListView で scrollTo を使用しようとしましたが、この場合、アプリは頻繁にジャンプします...良い経験ではありません。ListView の設定や、スクロール位置がリセットされないようにする dataSource を更新する別の方法はありますか?

ListView には 2 つの固定ヘッダーがあり、上部のヘッダーには 2 行のページの説明と、3 つの画像グリッドをレンダリングする redux コンテナーがあります。2 番目のセクションは、レンダリングがやや重い最大 50 個のコンポーネントのリストです: 正方形の画像、いくつかのテキスト、およびいくつかの SVG。私の現在の方法は、onContentSizeChange を使用してスクロール位置を強制的に動作させますが、これはスクロール位置のジャンプを引き起こし、アマチュアに見えます。

更新: ListView のドキュメントとソース コードを掘り下げると、最終的には ScrollView をレンダリングするだけです。contentOffsetを使用して初期スクロール位置を設定できますが、ListView DataSource が更新されたときに役に立たないようです。contentOffset をハードコーディングしても役に立ちません。また、 scrollEnabledを false に設定してみました。これにより、実際にユーザー主導のスクロールが妨げられましたが、DataSource が更新されたときに ListView のスクロール位置がリセットされます:s

更新 2:さらにデバッグを行ったところ、提案された rowHasChange および sectionHeaderHasChanged 関数が、レンダリングが必要な行/セクション ヘッダーのみをレンダリングするというかなり良い仕事をすることがわかりました。

ListView から行を削除するのに苦労しています。どの要素をクリックしても、リストの最後の要素が削除されます。ただし、console.log は、アレイがアイテムを正しく削除したことを示していますが、正しくレンダリングされていません...インターネットには既にいくつかの解決策がありますが、私の問題を解決するのに役立つものはありませんでした。

私の問題のGIF

ログ

ご覧のとおり、実際には正しいアイテムが削除されますが、間違った配列が表示されますか?

Nov 6 22:18:39 Viviennes-Air reminders[25992] <Notice>: { rowID: '0' } Nov 6 22:18:39 Viviennes-Air reminders[25992] <Notice>: [ 'testing 2', 'testing 3' ] Nov 6 22:18:39 Viviennes-Air reminders[25992] <Notice>: { _rowHasChanged: [Function: rowHasChanged], _getRowData: [Function: defaultGetRowData], _sectionHeaderHasChanged: [Function], _getSectionHeaderData: [Function: defaultGetSectionHeaderData], _dataBlob: { s1: [ 'testing 2', 'testing 3' ] }, _dirtyRows: [ [ false, false, true ] ], _dirtySections: [ false ], _cachedRowCount: 3, rowIdentities: [ [ '0', '1', '2' ] ], sectionIdentities: [ 's1' ] }

ここに私のコンストラクタがあります：

リストビュー:

renderRow 関数:

そして最後に、削除機能:

私はこれを2時間理解しようとしてきましたが、すべてを正しく行っていると確信しています.

反応ネイティブのListViewコンポーネントを使用すると、このようなセクション内で行をレンダリングできますか?

そして、このようではありません：

renderRow と renderSectionHeader を使用しています。

このようにレンダリングしたい理由は、スタイリングのためです。ListViewしかし、代わりに2つをネストする必要があるのでしょうか？

Android用のReact Native (ver. 0.37.0)を試して、簡単に学べるアプリを作ろうとしています。次のページに移動するボタンを正常に作成した後、ユーザーが ListView のアイテムをクリックして次のページに移動するようにします (オンライン ショップでアイテムをクリックすると、次のページに移動してアイテムの情報が表示されるように)。これが私のコードです：

上記のコードには、ListView の item と Button Add の 2 つのクリック可能なものがあります。どちらも同じメソッドを実行します。ボタンの追加は意図したとおりに機能し、クリックするとユーザーは次のページに移動します。しかし、ListView のアイテムがクリックされても、クリックされません。ボタンをクリックしたときと同じように色が変わり、アラート「きゃあ」が表示されますが、次のページに移動しません（アラートを削除しても同じです）。

私は何を間違えましたか？

リストビューにデータ ソースを設定すると、更新コントロール (プルダウンして更新) が完全に正常に機能します。データ ソースが空の場合、プルダウンしてリストビューを更新できません。

私のリストビューは次のようになります。

データソースが空/nullの場合でも、プルダウンを有効にしてリストビューを更新するためにリストビューまたはその他の方法に設定する必要がある小道具はありますか?

初めて非同期ストレージからデータをロードするため、この機能を探しています。プルダウンして更新すると、ストレージがクリアされ、新しいデータがフェッチされます。

一般的にネイティブおよびJavascriptプログラミングに反応するのは初めてで、React Nativeとreduxを使用して単純な「To Do」アプリを作成しようとしています。

以下に示すように、レデューサーの配列に「To Do」を追加しようとしています。

結果に AddToDo の結果が表示され ます。'First Thing' と 'Second Thing' が 2 つの追加結果であり、同じ行に連結されていることがわかります。

私の最初の考えは、以下のようにデータを取る私のダムまたはプレゼンテーションの ListView に何か問題があるということでした。

だから私はこれを試しました...

そしてそれは動作します!!! これが、エラーがレデューサーにあると私が考えている理由です。

他に役立つコードを教えてください。どんな洞察も大歓迎です。

これがアクションです。