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

问题描述 投票:0回答:1

我当前的scrollview项有问题,我需要为其设置一个固定的高度和宽度,以便在不同的设备上正确显示。

每个scrollview项目都应使用屏幕高度的1/6,以适合不同的屏幕尺寸...但是,如何在不使scrollview无法滚动的情况下实现这一点?

我当前的尝试...

 <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,但是列表不再可滚动。

因此,如何在使滚动视图可滚动的情况下将百分比/弯曲高度传递给项目?

javascript css reactjs react-native scrollview
1个回答
0
投票

在本机上,我建议在设置动态高度时使用Dimensions

为了获得屏幕的1/6,我要做的是

{ height: Dimensions.get("screen").height * 0.16 }
© www.soinside.com 2019 - 2024. All rights reserved.