ListViewでのデータの分割

Question

APIから受信したPeopleのリストがあるとします。

[{content: 'John'}, 
{content: 'Tim'}, 
{content: 'Harry J. Epstein'}] 

そして、あなたは「友人」と「連絡先」の下に（ハリー・J・エプスタイン）ではない人々のセクションの下の最初の名ベーシス友人（ジョンとティム）している人を置くために探しています。

友だちをタップすると青色のハイライトが選択されますが、「連絡先」をタップすると赤いハイライトが付いています。

適切なアプローチは、私がハイライト機能を分割することができますので、別々のFriendItemとContactItemクラスで、APIからの着信データを取り、その周りtype: 'Friend', ...またはtype: 'Contact', ...を追加し、その種類に基づいて、セクションするだろうか？

私は、この正確なアプローチを行うだけの基本的なListViewコードを持っていますが、私は基本的に角度のng-repeat相当のような簡単な方法を探しています。

ので

var friends = api.getFriends() 
var contacts = api.getContacts() 

<div ng-repeat="friend in friends" ng-click="highlightFriend()"> ... </div> 
<div ng-repeat="contact in contacts" ng-click="highlightContact()"> ... </div> 

のリアクトネイティブバージョンは、私はそれを分割する方法を理解するのに苦労してんですよ。 FriendsPage,FriendsItem、ContactsItemが必要ですか？または、すべてをFriendsPageの1つの配列に入れ、それが友人か連絡先かどうかをチェックして別々に関数を追加するFriendsItemを使用しますか？

MVCから少し失われているような気がします。簡単な方法であればReduxも走っています。ここで

Answer 1

あなたはセクション依存の行を作成する方法の良い例です：https://github.com/spoeck/ListViewExample

アイデアは少しトリッキーである、適切にデータブロブを作成し、あなたのrenderRowコールバックで、チェックするために基本的ですsectionIDパラメータ：

_renderRow(rowData: any, sectionID: any, rowID: number) { 

    if (sectionID === this.data[0].section) { 
     return <MyFriends /> 

    } else if (sectionID === this.data[1].section) { 
     return <MyContacts /> 

    }else{ 
    // ... 
    } 

} 

Answer 2

新しいFlatListまたはSectionList COMPONを使用しSectionList

をしようとしない理由代わりにent。 APIを簡略化する のほかに、新しいリストコンポーネントの重要な機能拡張は、 であり、主なものはほぼ一定のメモリ の行数です。