react-native - react native : VirtualizedList only rendering 10 items

Question

为什么这个 VirtualizedList 在应该 365 度渲染时只渲染前 10 个项目？如果我传递一个包含超过 10 个项目的 data 变量，它工作正常，但当我使用 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>
    );
  }
}

Answer 1

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