React Native Flatlist: как вертикально центральное содержание под фиксированным заголовком в renderitem? ⇐ CSS

[Anonymous]

Я строю вступительный ползунок в Greact Native, используя горизонтальный список. Каждый слайд состоит из: < /p>

Название, выровненное в верхней части слайда < /li>
Блок изображения и описания, который должен быть вертикально
, центрированное в оставшемся пространстве под названием. Хотя я применил Flex: 1 и LevifyContent: 'Center' к их контейнеру.
(


{item.title}



{item.descr}


)}
/>

const styles = StyleSheet.create({
slide: {
flex: 1,
alignItems: 'center',
flexDirection: 'column',
// justifyContent: 'center', // removed to keep title at top
},
titleContainer: {
height: 60,
justifyContent: 'center',
alignItems: 'center',
},
contentWrapper: {
flex: 1,
justifyContent: 'center', // intended to center vertically
alignItems: 'center',
width: '100%',
paddingHorizontal: 20,
},
title: { fontSize: 26, fontWeight: '700', textAlign: 'center' },
image: { width: 300, height: 300 },
desc: { fontSize: 16, textAlign: 'center', marginTop: 12, color: '#555', lineHeight: 22 },
});
< /code>
Я пробовал несколько вещей: < /p>

Удаление LevifyContent: 'Center' от Slide, чтобы сохранить заголовок в
< /p>
< /li>
Использование Glexgrow: 1 вместо гибкого: 1 на ContentWrapper, < /p> p> p> p> p> p> p> p> p> p> p> p> p> p> p> p> p> p> p> p> p> p> p> p> p> p> p> p> p> p> p> p /p> p> p /p> p /p> p /p> p /p />
. /> Установка фиксированной высоты или высоты: '100%' на контейнере слайда, < /p>
< /li>
Убедитесь, что изображение имеет фиксированную ширину и высоту. < /p>
< /li>
< /ul>
upline ganging: < /prong> < /p>

. /> синий: контейнер < /p>
< /li>
red: slide < /p>
< /li>
green: contentWrapper < /p>
< /li>
< /ul>

Тем не менее, контент внутри ContentWrapper остается застрявшим на вершине и не будет центрировать вертикально. Как я могу решить эту проблему макета?

Подробнее здесь: https://stackoverflow.com/questions/797 ... -header-in