使 ScrollView - 项目使用整个屏幕的百分比大小

Question

My current scrollview items have the problem, that I need to set a fixed height and width for them in order to show up properly on different devices.

Every scrollview item should use 1/6 of the screen height in order to fit for different screen sizes... but how do we achieve this without making the scrollview unscrollable ?

My current attempt...

 <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>
        );
    }
}

Renders a scrollview with 5 BoxView-Items... The problem here is... the box views do scale correctly, each one uses 0.25 flex, but the list is not scrollable anymore.

So how do we pass a percentage/flex height to the items with keeping the scrollview scrollable ?

Answer 1

On react native I recommend using Dimensions on setting dynamic height.

for getting the 1/6 of the screen I would do is

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