React Native：VirtualizedList只渲染10个项目

为什么VirtualizedList只渲染应该渲染365的前10个项目？如果我通过一个data变量与超过10个项目它工作正常，但失败时，我使用getItem方法。React Native：VirtualizedList只渲染10个项目

export default class ListTest extends Component { 
    render() { 
    return (
     <View> 
     <VirtualizedList 
      initialNumberToRender={20} 
      windowSize={21} 
      getItemCount={(data) => 365} 
      getItem={(data, index) => { 
      return { key: index }; 
      }} 
      keyExtractor={(item, index) => { 
      return item.key; 
      }} 
      renderItem={({ item, index }) => { 
      return (
       <View style={{height:50}}> 
       <Text>{item.key}</Text> 
       </View> 
      ); 
      }} 
     /> 
     </View> 
    ); 
    } 
}

来源

2017-04-13 mathew

当您给它一个getItem时，您仍然必须传递数据属性。 getItem只是您传递的数据变量的访问者。默认情况下，getItem被定义为：

static defaultProps = { 
    disableVirtualization: false, 
    getItem: (data: any, index: number) => data[index], 
    ...

来源

2017-04-21 00:44:52

我不认为我理解。如果我不使用数据变量并重写getItem（），为什么它会导致列表被限制为10个项目？ – mathew

@Nwah是正确的，您必须将一个数据道具传递给将被渲染的VirtualizedList组件。您看到10个项目呈现的原因是因为虚拟化列表默认情况下会在窗口中呈现10个项目。由于您的渲染项目组件实际上不能访问项目数据，但只有密钥，您仍然可以获得适当的渲染。如果您尝试访问renderItem prop中的项目，将会出现渲染错误。 – Anton

data需要存在。

class DataSource { 
    getElementAtIndex (index) { 
    return { key: index } 
    } 
} 

const data = new DataSource() 

function getItem (data, index) { 
    return data.getElementAtIndex(index) 
} 

function getItemCount (data) { 
    return 1000 
} 

const ComponentView = (props) => { 
    return (
     <VirtualizedList 
     data={data} 
     style={{backgroundColor: 'red'}} 
     // initialNumToRender={20} 
     // maxToRenderPerBatch={} 
     // windowSize={21} 
     getItemCount={getItemCount} 
     getItem={getItem} 
     keyExtractor={(item, index) => { 
      return item.key 
     }} 
     renderItem={({ item, index }) => { 
      return (
      <View style={{height: 50, backgroundColor: 'yellow'}}> 
       <Text>{item.key}</Text> 
      </View> 
     ) 
     }} 
     /> 
) 
}

来源

2017-08-09 17:01:54 Gaston

React Native：VirtualizedList只渲染10个项目

回答

相关问题