Полноэкранные высоты. ⇐ CSS

[Anonymous]

Я пытаюсь внедрить список с полным размером экрана, но не смог сделать это без ручного установления высоты элементов на основе доступного экрана, и мне было интересно, возможно ли вместо этого сделать это со свойствами Flex Box. https://snack.expo.dev/@xeitor/full-hei ... list-items. А вот код: < /p>

Код: Выделить всё

import React from 'react';
import {StyleSheet, View, FlatList, Text, Dimensions} from 'react-native';

const Flex = () => {
const items = [
{id: 1, name: 'item 1', backgroundColor: 'red'},
{id: 2, name: 'item 2', backgroundColor: 'darkorange'},
{id: 3, name: 'item 3', backgroundColor: 'green'},
{id: 4, name: 'item 4', backgroundColor: 'blue'},
{id: 5, name: 'item 5', backgroundColor: 'purple'},
];

const renderItem = ({item}) => (

{item.name}

);

return (
 item.id.toString()}
pagingEnabled
showsVerticalScrollIndicator={false}
snapToAlignment="start"
decelerationRate="fast"
snapToInterval={Dimensions.get('window').height}
/>
);
};

const styles = StyleSheet.create({
item: {
height: Dimensions.get('window').height,
justifyContent: 'center',
alignItems: 'center',
},
text: {
color: 'white',
fontSize: 24,
},
});

export default Flex;

Можно ли даже сделать это с гибкими свойствами или любым другим способом, который не требует расчета доступного размера экрана?

Подробнее здесь: https://stackoverflow.com/questions/796 ... list-items