Новый мини проект - разработка приложения-меню. Приступим к работе!
Будем использовать SectionList
, ведь в меню есть разные разделы.
Подготовленные данные можешь увидеть в файле data.js
.
Импортируй данные в файл App.js
и используй их для поля sections
.
keyExtractor
определим для списка свой. Метод должен возврата поле uid
для каждого элемента списка.
Классу App
добавь два метода: renderSectionHeader
и renderItem
. Пусть каждый пока возвращает просто null
.
Элементу SectionList
укажи оба свойства renderSectionHeader
и renderItem
, передав соответствующие методы класса.
Эта задача — часть курса по Full-Stack JavaScript.
Ты можешь задать свой вопрос в комментариях под постом.
Если ты уже решил задачу, то не стесняйся помочь другим.
App.js
import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
export default class App extends React.Component {
render() {
return <SafeAreaView style={styles.container} />;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
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"
}
}
}
data.js
export const sectionsData = [
{
menuSection: 'Main dishes',
data: [
{
uid: 'main1',
price: '$10.00',
name: 'Pepperoni Feast',
description: 'Pepperoni, pepperoni, and more pepperoni',
},
{
uid: 'main2',
price: '$12.00',
name: 'Chicken Supreme',
description: 'Chicken, mushrooms & onions',
},
],
},
{
menuSection: 'Deserts',
data: [
{
uid: 'deserts1',
name: 'White Chocolate & Caramel Cookie Dough',
price: '$4.00',
description: 'With vanilla ice cream & salted caramel sauce',
},
{
uid: 'deserts2',
name: 'Hot Chocolate Brownie',
price: '$5.50',
description: 'With vanilla ice cream & chocolate sauce',
},
],
},
];