我的应用程序中有一个屏幕,其中包含“介于两者之间”的内容。这个内容对于Iphone 5-8来说太长了,对于Iphone 8S-XS Max来说只有一屏。
为了修复它,我装上了一个简单的 ScrollView
,这适用于太长的内容,但对于较大的屏幕尺寸,它会留下灰色背景,如下面的屏幕截图所示:
这是代码:
<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
),但仍然无济于事。无论设备如何,如何使 ScrollView 中包含的内容占据整个屏幕高度?
最佳答案
所以我实际上在这篇中等文章中找到了答案:
https://medium.com/@peterpme/taming-react-natives-scrollview-with-flex-144e6ff76c08
答案是,在您的 <ScrollView>
上组件,分配以下属性:
contentContainerStyle={{flexGrow: 1, justifyContent: 'space-between'}}
它对我很有用!
关于javascript - ReactNative 中的 ScrollView 没有填充剩余空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53164315/