В App.js
надо отрендерить массив data в список FlatList
.
Каждый элемент списка должен быть блоком со стилем styles.item
.
Внутри этого блока должен быть выведен текст, соответствующий элементу списка.
Стили текста должны быть styles.itemText
.
Список должен быть горизонтальный, а прокрутка постраничная.
Эта задача — часть курса по Full-Stack JavaScript
Ты можешь задать свой вопрос в комментариях под постом
Если ты уже решил задачу, то не стесняйся помочь другим
App.js
import React from 'react';
import { Text, SafeAreaView, StyleSheet, Dimensions } from 'react-native';
const data = ['Tomoto', 'Cheese', 'Onion'];
function App() {
return (
<SafeAreaView style={styles.container}>
<Text style={styles.header}>Pizza ingredients</Text>
</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;
app.json
{
"expo": {
"name": "1",
"slug": "1",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
}
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}