Make ScrollView - элементы используют процентный размер всего экрана

Question

У моих текущих элементов scrollview есть проблема, я должен установить фиксированную высоту и ширину для них, чтобы они правильно отображались на разных устройствах.

Каждый элемент scrollview должен использовать 1/6 экрана высота, чтобы соответствовать разным размерам экрана ... но как этого добиться, не делая прокрутку без прокрутки?

Моя текущая попытка ...

 <ScrollView style={{backgroundColor: 'blue'}} contentContainerStyle={{flexGrow: 1}}>

    { /* Renders the header */}
    <Header text={Constants.header} screen="Drills&Games"/>

     <BoxView></BoxView>
     <BoxView></BoxView>
     <BoxView></BoxView>
     <BoxView></BoxView>
     <BoxView></BoxView>

  </ScrollView>



export default class BoxView extends Component{

    render(){

        return(

            <View style={{backgroundColor: 'red', flex: 0.25}}>

            </View>
        );
    }
}

Визуализация прокрутки с 5 BoxView-Items ... Проблема здесь заключается в том, что ... представления бокса масштабируются правильно, каждый из них использует 0.25 flex, но список больше не прокручивается.

Так, как мы передаем процент / высоту flex к элементам с сохранением прокрутки прокрутки?

Answer 1

При работе с исходным кодом я рекомендую использовать Размеры при настройке динамич c высота.

для получения 1/6 экрана, который я бы сделал, это

{ height: Dimensions.get("screen").height * 0.16 }