React Native ScrollView 在滚动视图之外的顶部添加了额外的空间

Question

我有一个反应本机应用程序，它有一个滚动视图，当我滚动回顶部时，在滚动视图容器外部添加了一个额外的空间。我添加了一个视图来显示我面临的问题。该问题仅在 Android Simulator 上存在。

RN 版本：-

0.75.2

节点版本 -

20.16.0

模拟器 -

Pixel 3A XL(API 34)

这是参考代码

<View style={{backgroundColor: 'red', flex: 1}}>
        <ScrollView
          contentContainerStyle={{flexGrow: 1, backgroundColor: '#000'}}>
          <Text style={{fontSize: 24, lineHeight: 32, color: '#FFF'}}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum
            dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat. Duis aute irure dolor in reprehenderit in
            voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
            officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit
            amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
            ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
            nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum. Lorem ipsum dolor sit amet, consectetur
            adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum. Lorem ipsum dolor sit amet, consectetur
            adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.
          </Text>
        </ScrollView>
      </View>

视频如下： 在此输入图片描述

我希望它不会在顶部添加额外的空间

Answer 1

1. 调整ScrollView样式： 尝试在 ScrollView 组件上设置 padding: 0 和 margin: 0 ：
2. 使用 android:scrollbarStyle: 将以下内容添加到您的 Android styles.xml 文件（通常位于 android/app/src/main/res/values/styles.xml）： XML
3. 禁用 overScrollMode： 将 overScrollMode="never" 添加到您的 ScrollView 组件中： 检查冲突的样式：
4. 验证没有其他样式或布局向 ScrollView 或其父组件应用填充或边距。 如果这些解决方案都不能解决问题，请提供更多代码上下文或澄清您正在使用的确切 React Native 版本。这将有助于我提供更有针对性的帮助。 另外，如果 ScrollView 中有任何粘性标题，您可以尝试将 StickyHeaderIndices 设置为空数组 []。