Блог

Я новичок в React Native, и я хотел создать простое приложение с использованием API Marvel, и для этого я использую оболочку API. Я хочу отобразить бесконечный вид прокрутки с помощью VirtualizedList. И вот вопрос: что передать в renderItem и компонентах данных? И хорошо ли написана константа «findCharacters» или я должен что-то изменить? И, наконец, должен ли я изменить VirtualizedList на FlatList или ScrollView? Мой код приведен ниже

    const findCharacters = marvel.characters.findAll()
  .then(console.log)
  .fail(console.error)
  .done();


  return (
    <View style={styles.container}>
      <VirtualizedList
      data={/* what to pass here? */}
      renderItem={/* what to pass here? */} />
    </View>
  );
}
 

Это хорошая идея использовать значимые имена переменных, в вашем случае что-то вроде getMarvelCharacters звучит хорошо.

Ответ API выдает JSON data , содержащий массив объектов персонажей marvel. Передайте это в data параметр VirtualizedList.

Что касается renderItem реквизита, то в основном речь идет о том, как вы хотите визуализировать каждый из объектов, data то есть персонажей marvel. Прочитайте полную документацию по VirtualizedList здесь.

Таким образом, весь код может быть примерно таким.

 const [marvelCharacters, setMarvelCharacters] = useState([]);

const getMarvelCharacters = marvel.characters.findAll()
  .then((err, results) => {
    setMarvelCharacters(results.data);
  })
  .fail(console.error)
  .done();

useEffect(() => {
  getMarvelCharacters();
}, []);

const CharacterItem = ({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
);

return (
    <View style={styles.container}>
      <VirtualizedList
      data={marvelCharacters}
      renderItem={({ item }) => <CharacterItem title={item.title}/>} />}
    </View>
  );