React native 反应本机：VirtualizedList仅呈现10项

为什么这个虚拟化列表只呈现前10项，而它应该呈现365项？如果我传递的

data

变量包含10个以上的项，它工作正常，但在使用

getItem

方法时失败

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>
    );
  }
}

导出默认类ListTest扩展组件{
render（）{
返回(
365}
getItem={（数据，索引）=>{
返回{key:index}；
}}
keyExtractor={（项，索引）=>{
返回item.key；
}}
renderItem={（{item，index}）=>{
返回(
{item.key}
);
}}
/>
);
}
}

在为数据属性指定getItem时，仍然必须传递该属性。getItem只是您传递的数据变量的访问器。默认情况下，getItem的定义如下：

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

---

数据

需要存在

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>
          )
        }}
      />
  )
}

类数据源{
getElementAtIndex（索引）{
返回{key:index}
}
}
常量数据=新数据源（）
函数getItem（数据、索引）{
返回数据。getElementAtIndex（索引）
}
函数getItemCount（数据）{
返回1000
}
常量组件视图=（道具）=>{
返回(
{
返回item.key
}}
renderItem={（{item，index}）=>{
返回(
{item.key}
)
}}
/>
)
}

如果您需要20个，您可以尝试：

initialNumToRender={20}

而不是你的：

initialNumberToRender={20}

API似乎已更改：

---

我想我不明白。如果我不使用数据变量并覆盖getItem（），为什么会导致列表限制为10项？@Nwah是正确的，您必须将数据道具传递给将呈现的VirtualizedList组件。您看到10个项目呈现的原因是，默认情况下，虚拟化列表将在窗口中呈现10个项目。由于渲染项组件实际上不访问项数据，而只访问键，因此仍然可以获得正确的渲染。如果尝试访问renderItem道具中的项，则会出现渲染错误。