带有手风琴列表的 ScrollView 溢出导航器边界答案

【问题标题】：ScrollView with Accordion Lists overflowing navigator boundaries带有手风琴列表的 ScrollView 溢出导航器边界
【发布时间】：2020-01-27 01:52:46
【问题描述】：

由于屏幕上显示的数据量很大，我需要使用ScrollView。
但是，当它首次显示时，手风琴列表全部折叠。在通过用户单击展开其中任何一个后，ScrollView（位于 flex 布局内）将展开底部导航栏的边界。

我想限制它，例如 bottom:60，但它无法正常工作。

这是我当前拥有的标签：

    <View style={{flex:10,padding:10, flexDirection:"column", justifyContent:"space-around"}}>
...
        <ScrollView style={{flex:9, bottom:60}} contentContainerStyle={{flexGrow:1, bottom:60}} >

我已经尝试只使用 contentContainerStyle 属性，而没有使用 style 属性，但它也不起作用。

有人知道如何正确设置这种样式吗？

【问题讨论】：

你能分享一个世博小吃网址，我可以检查和恢复
看来我部分明白了。我可以使用以下代码限制 ScrollView 的最大大小：` ` 我在这里保存了零食：snack.expo.io/@rodhoff/bold-juice-box。但是，我希望根据屏幕大小调整 ScrollView 的大小。我有一个大约 60 大小的底部导航器（react-navigation），我希望它不要隐藏在它后面。
差不多了...我可以使用以下代码修复尺寸：scrollDimensions = [{ width: Math.round(Dimensions.get('window').width - 20), height: Math.round(Dimensions.get('window').height - 200 ) }]; ... let sDimensions = this.scrollDimensions; ... <ScrollView contentContainerStyle={[{ top: 100, bottom: 100, left: 10, right: 10, }, sDimensions]} > 。下面的 cmets ==>
使用expo，它在网页版中完美运行。然而在Android版本中，虽然ScrollView的大小是完美的，但它并不能正常滚动……

标签： javascript android react-native react-navigation

【解决方案1】：

终于弄明白了...没有注意到官方ScrollView链接上提到的<SafeAreaView>：https://facebook.github.io/react-native/docs/scrollview

这种方式效果很好：


scrollDimensions = [{ 
    width:  Math.round(Dimensions.get('window').width - 20),
    maxHeight: Math.round(Dimensions.get('window').height - 200 ) 
}];

...

let sDimensions = this.scrollDimensions;

...

    <View style={{flex:20, margin:4, flexDirection:"column", justifyContent:"flex-start"}}>
        <Title style={{flex:1}}>New Subject</Title>
        <SafeAreaView style={[{flex:19, }, sDimensions]}>
        <ScrollView     

                    contentContainerStyle={{}} >

...

【讨论】：