ReactNative中的ScrollView无法填充剩余空间

时间:2018-11-06 00:44:45

标签: javascript react-native scrollview

我的应用程序中有一个屏幕,其中包含“介于两者之间”的内容。对于Iphone 5-8来说,此内容太长,但对于Iphone 8S-XS Max来说,只有一个屏幕。

要修复此问题,我安装了一个简单的ScrollView,它适用于内容太长的内容,但是对于较大的屏幕尺寸,它会留下灰色背景,如下面的屏幕快照所示:< br /> enter image description here

代码如下:

<View style={{flex: 1, width: '100%',justifyContent: 'center', alignItems: 'center', height: 900,}}>
    <ScrollView style={{width: '100%', flex: 1, height: 900}}>
        <ImageBackground source={require('../../assets/images/background.png')} style={{width: '100%', flex: 1, justifyContent: 'flex-start', alignItems: 'center', backgroundColor: 'background-color: rgba(0, 0, 0, 0.5)',}}>
            {/*...Unimportant view code...*/}
        </ImageBackground>
    </ScrollView>
</View>

如您所见,我已将flex: 1应用于所有重要容器,并且尝试将上述所有容器上的边界高度(例如height: 900)放置到徒劳无功。

无论设备如何,如何使滚动视图中包含的内容占据整个屏幕高度?

1 个答案:

答案 0 :(得分:3)

所以我实际上在这里的这篇中等文章中找到了答案:
https://medium.com/@peterpme/taming-react-natives-scrollview-with-flex-144e6ff76c08 答案是,在您的<ScrollView>组件上,分配以下属性:

contentContainerStyle={{flexGrow: 1, justifyContent: 'space-between'}}

它对我来说就像一种魅力!