在 Android 的 FlatList (React Native) 中隐藏滚动条

Posted 2023-02-16

【中文标题】在 Android 的 FlatList (React Native) 中隐藏滚动条

【英文标题】：Hide scrollbar in FlatList (React Native) in Android

【发布时间】：2017-10-14 17:39:45

【问题描述】：

我正在尝试在我的应用程序中使用 FlatList（React-native）。我水平使用它，可以看到滚动条。 ScrollView 中有一个选项可以隐藏滚动条，但 FlatList 中没有。有没有人能够以其他方式隐藏它。我尝试使用父子容器（Hide scroll bar, but still being able to scroll）的解决方案，但没有成功。

import React,  Component  from 'react';
import  Text, View, FlatList, StyleSheet, ScrollView  from 'react-native';
import  Card, Button  from 'react-native-elements';

const data = [
     id: 1, title: 'title 1', details: 'details 1 details 1 details 1' ,
     id: 2, title: 'title 2', details: 'details 2 details 2 details 2 details 2 details 2 details 2' ,
     id: 3, title: 'title 3', details: 'details 3 details 3' ,
     id: 4, title: 'title 4 title 4', details: 'details 4' ,
];
class CategoryRow extends Component 

    _keyExtractor = (item, index) => item.id;

    _renderItem = (item) => 
        return (
            <Card style=styles.cardContainer>
                <Text>item.title</Text>   
                <Text>item.details</Text> 
            </Card>
        );
    

    render() 
        return (
            <View style= flex: 1, overflow:'hidden' >
                <View style= overflow:'hidden' >
                    <Text>Category 1</Text>
                    <FlatList
                        horizontal
                        data=data
                        renderItem=( item ) => this._renderItem(item)
                        keyExtractor=this._keyExtractor

                    />
                </View>
            </View>
        );
    


const styles = StyleSheet.create(
    cardContainer: 
        width: 140,
        height: 150,
        borderWidth: 0.5,
        borderColor: 'grey',
        overflow: 'scroll',
    ,
)

export default CategoryRow;

【问题讨论】：

试试showsHorizontalScrollIndicator=false

垂直尝试：showsVerticalScrollIndicator=false

【参考方案1】：

只需添加

showsHorizontalScrollIndicator=false

【讨论】：

它工作了，但官方文档中没有提到它作为 FlatList 的道具。

@sushilbansal 因为这个道具继承自 ScrollView，不需要重新记录......

@user2976753 SafeAreaView 有什么用！

【参考方案2】：

禁用垂直和水平滚动指示器

<ScrollView
  showsVerticalScrollIndicator=false
  showsHorizontalScrollIndicator=false
 />

【参考方案3】：

如果您想隐藏垂直滚动条，请使用：

showsVerticalScrollIndicator=false

【参考方案4】：

FlatList is inherited from VirtualizedList.
VirtualizedList is inherited from ScrollView.
So you can use ScrollView props to hide scrollBar indicators in FlatList.

<FlatList
  ...
  showsVerticalScrollIndicator =false
  showsHorizontalScrollIndicator=false
  ...
/>

【参考方案5】：

尝试使 ListView 水平添加 (horizo​​ntal=true) 下面提到，如果您只想隐藏滚动条，只需添加 (showsHorizo​​ntalScrollIndicator=false)

<ListView showsHorizontalScrollIndicator=false
                      horizontal=true

/>

【参考方案6】：

隐藏垂直滚动条

showsVerticalScrollIndicator=false

隐藏水平滚动条

showsHorizontalScrollIndicator=false

（在您的 FlatList 组件中添加这些道具。）

【参考方案7】：

<ScrollView showsVerticalScrollIndicator =false/>

【参考方案8】：

在 FlatList 和 ScrollView 中都可以添加 showsHorizontalScrollIndicator=false prop