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

Question

我当前的滚动视图项目存在问题，我需要为它们设置固定的高度和宽度，以便在不同的设备上正确显示。

每个滚动视图项应使用屏幕高度的 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，但列表不再可滚动。

那么我们如何在保持滚动视图可滚动的情况下将百分比/弹性高度传递给项目？

Answer 1

在 react native 上，我建议使用 Dimensions 设置动态高度。

为了获得屏幕的 1/6，我会做的是

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