не понимаю почему не выводись список
FlatList
В App.js надо отрендерить массив data в список FlatList.
Каждый элемент списка должен быть блоком со стилем styles.item.
Внутри этого блока должен быть выведен текст, соответствующий элементу списка.
Стили текста должны быть styles.itemText.
Список должен быть горизонтальный, а прокрутка постраничная.
Не проходят эти проверки:
Функция renderItem элемента <FlatList> должна возвращать элемент View
Элемент View, возвращаемый из renderItem, должен иметь только один дочерний элемент <Text>
Элемент Text, возвращаемый из renderItem, должен отображать текст элемента данных
Элемент View, возвращаемый из renderItem, должен иметь свойство стиля, равное на styles.item
Элемент Text, возвращаемый из renderItem, должен иметь свойство стиля, равное на styles.itemText
Вроде все прям по учебнику сдела, но единственная выдаваемая ошибка что-то говорила про ключи, однако они должны присваиваться автоматически, а когда я их попробовал присвоить сам - ошибок насыпало еще больше. В общем не могу даже и представить что тут не так при том что в гугле ничего не нашел...
'''
import React from 'react';
import { Text, SafeAreaView, StyleSheet, Dimensions, FlatList, View } from 'react-native';
const data = ['Tomoto', 'Cheese', 'Onion'];
function App() {
return (
<SafeAreaView style={styles.container}>
<Text style={styles.header}>Pizza ingredients</Text>
<FlatList
data={data}
//keyExtractor={item=> data.indexOf(item)}
renderItem={(item)=>{
<View style={styles.item}>
<Text style={styles.itemText}>{item}</Text>
</View>
}}
horizontal
pagingEnabled
>
</FlatList>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
header: {
paddingLeft: 20,
fontSize: 30,
fontWeight: 'bold',
},
item: {
width: Dimensions.get('screen').width,
height: 100,
padding: 20,
},
itemText: {
color: '#fff',
backgroundColor: '#f4bc40',
fontWeight: 'bold',
fontSize: 20,
paddingVertical: 10,
paddingLeft: 20,
},
});
export default App;
'''