React Native FlatList隐藏滚动条失效 根源为debug={true}

问题详情 #

• React Native版本：0.74.5
• 核心问题：函数组件内的FlatList已配置showsVerticalScrollIndicator={false}，但垂直滚动条始终保持可见
• 组件层级（无外层ScrollView包裹）：

...
Suspense
Section
Anonymous
View
FlatList <----- 问题FlatList
ForwardRef
VirtualizedList
View
VirtualizedListContextprovider
VirtualizedListContext.provider 
ScrollView
ScrollView
...

• 相关代码片段：

const Section = () => {
    ...
    return data && <SafeAreaView 
                ...
            <FlatList
            ...
            data={data}
            horizontal={false}
            scrollEnabled = {true}
            showsVerticalScrollIndicator={false}
            ...
            />
}

排查结论（2024年11月16日更新） #

经定位，该问题由**debug={true}**配置导致。

解决方案 #

将debug属性设置为false，即可正常隐藏FlatList的垂直滚动条。

内容的提问来源于stack exchange，提问作者tim bits