반응 형 네이티브 VirtualizedList를 사용하여 데이터 객체를 반복하는 방법은 무엇입니까?

Question

데이터가 Array 인 경우 ListView에서 FlatList로 성공적으로 마이그레이션 할 수 있지만 개체에 대한 새로운 React Native List 유형을 데이터로 구현하는 방법은 무엇입니까?

VirtualizedList (링크 : https://facebook.github.io/react-native/releases/0.44/docs/virtualizedlist.html#virtualizedlist)를 사용하려고하지만 모든 키를 반복 할 수 없습니다.

예 데이터 :

{ 
    ruth: { 
     id: 10901, 
     fullName: 'Ruth Rachelin' 
     gender: 'female' 
    }, 
    rupert: { 
     id: 20033, 
     fullName: 'Rupert Luis' 
     gender: 'male' 
    } 
} 

코드, 아주 잘하지 : 나는 그것을 주변에있어

import React, { Component } from 'react'; 
import { VirtualizedList } from 'react-native'; 
import _isEqual from 'lodash/isEqual'; 
import _size from 'lodash/size'; 
import _forEach from 'lodash/forEach'; 
import GameListView from './GameListView'; 

export default class GameCategoriesRoll extends Component 
{ 
    constructor(props) 
    { 
     super(props) 
     // console.log('data:', this.props.data); 
     this._getItem = this._getItem.bind(this) 
     this._keyExtractor = this._keyExtractor.bind(this) 
     this._renderRow = this._renderRow.bind(this) 
    } 

    shouldComponentUpdate(nextProps, nextState, nextContext) 
    { 
     return !_isEqual(this.props, nextProps) || !_isEqual(this.state, nextState) 
    } 

    _keyExtractor(data) { 
     // returns all keys in object 
     return _forEach(data, function(category, key){ 
      console.log('keyextractor:', key); 
      return key 
     }); 
    } 

    _getItem(data) { 
     // data is the whole collection returned so i try to return just one key 
     return _forEach(data, function(category, key){ 
      console.log('getItem category: ', category, 'key', key); 
      return category 
     }); 
    } 

    _renderRow(item) 
    { 
     console.log('renderRow: ', item); // <- returns whole collection/object 
     if (item.appItems && item.appItems.length > 0) 
     { 
      console.log('item', item); 
      /*return (
       <GameListView 
        category={item.name} 
        games={item} 
        recentlyPlayed={false} 
       />)*/ 
     } 
    } 

    render() 
    { 
     return (
      <VirtualizedList 
       keyExtractor={(item) => this._keyExtractor(item)} 
       data={this.props.data} 
       getItem={(data) => this._getItem(data)} 
       getItemCount={(data) => data ? _size(data) : 0} 
       renderItem={this._renderRow} 
       debug 
       contentContainerStyle={{ flexGrow: 1, overflow: 'hidden' }} 
       showsVerticalScrollIndicator={false} 
       automaticallyAdjustContentInsets={false} 
       removeClippedSubviews={false} 
       enableEmptySections={true} 
      /> 
     ) 
    } 
} 

Answer 1

! 내가 사용하여 배열에 개체를 변환 lodash의 _values() https://lodash.com/docs/4.17.4#values

그래서이 트릭을 수행합니다

<FlatList 
    keyExtractor={(item) => item.name} 
    data={_values(this.props.data)} 
    renderItem={this._renderRow} 
    contentContainerStyle={{ flexGrow: 1, overflow: 'hidden' }} 
    showsVerticalScrollIndicator={false} 
    automaticallyAdjustContentInsets={false} 
    removeClippedSubviews={false} 
    enableEmptySections={true} 
/>