Это то же самое, что и в списке разделов, или если вы хотите использовать плоский список, внутри которого вы предоставляете реквизит с именем renderItem, а внутри - свой пользовательский компонент. Так же, как вы делаете стили для любого пользовательского компонента, это то же самое. проверьте ниже, внутри функции Item
я добавил styles.item
в качестве стиля и добавил там высоту 80, вы можете поиграть. Проверьте ссылку exmaple :
*import React from 'react';
import {
StyleSheet,
Text,
View,
SafeAreaView,
SectionList,
} from 'react-native';
import Constants from 'expo-constants';
const DATA = [
{
title: 'Main dishes',
data: ['Pizza', 'Burger', 'Risotto'],
},
{
title: 'Sides',
data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
},
{
title: 'Drinks',
data: ['Water', 'Coke', 'Beer'],
},
{
title: 'Desserts',
data: ['Cheese Cake', 'Ice Cream'],
},
];
function Item({ title }) {
return (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
}
export default function App() {
return (
<SafeAreaView style={styles.container}>
<SectionList
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => <Item title={item} />}
renderSectionHeader={({ section: { title } }) => (
<Text style={styles.header}>{title}</Text>
)}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Constants.statusBarHeight,
marginHorizontal: 16,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
height:80
},
header: {
fontSize: 32,
margin:50
},
title: {
fontSize: 24,
},
});*
надеюсь, это поможет.