Question

在下面的代码中，有一个包含 200 个元素的数组。我正在使用 Flatlist 来呈现数组的元素。但是 renderItems 函数是为前 10 个元素调用的，然后是前 20 个元素，包括前 10 个元素，然后是前 30 个元素，包括前 20 个元素，依此类推。我希望为每个项目调用一次 renderItems 函数，并且只为屏幕上显示的项目调用一次。我应该在代码中更改哪些内容？

import {View, Text, FlatList} from 'react-native';
const numbers = Array.from(Array(200), (_, i) => i);

const renderItems = (item) => {
  console.log('Render Items == ', item.item);
  return (
    <View>
      <Text
        style={{
          fontSize: 40,
          fontWeight: '400',
          textAlign: 'center',
          flex: 1,
        }}>
        {item.item}
      </Text>
    </View>
  );
};

const App = () => {
  return (
    <View
      style={{
        flex: 1,
        width: '100%',
      }}>
      <FlatList
        data={numbers}
        renderItem={renderItems}
        keyExtractor={(item) => item.toString()}
      />
    </View>
  );
};

export default App;```

对原生 Flatlist 重新渲染元素做出反应

0 个答案: