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

Question

我正在尝试在我的应用程序中使用FlatList(React-native(。我正在水平使用它，可以看到滚动条。ScrollView 中有一个选项可以隐藏滚动条，但不隐藏 FlatList。有没有人能够以其他方式隐藏它。我尝试使用父和子容器的解决方案(隐藏滚动条，但仍然能够滚动(，但没有工作。

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;

Answer 1

只需添加

showsHorizontalScrollIndicator={false}

Answer 2

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

<ScrollView
  showsVerticalScrollIndicator={false}
  showsHorizontalScrollIndicator={false}
 />

Answer 3

如果您尝试隐藏垂直滚动条，请使用以下命令：

showsVerticalScrollIndicator={false}

Answer 4

FlatList 继承自 VirtualizedList.
VirtualizedList 继承自 ScrollView.
因此，您可以使用 ScrollView 道具在 FlatList 中隐藏滚动条指示器。

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

Answer 5

尝试这样做以使ListView水平添加(水平={true}(，如果您只想隐藏滚动条，只需添加(显示水平滚动指示器={false}(

<ListView showsHorizontalScrollIndicator={false} horizontal={true} />

Answer 6

在我的情况下Animated使用Flatlist版本解决了问题：

<Animated.FlatList
  ...
  showsVerticalScrollIndicator ={false}
  showsHorizontalScrollIndicator={false}
  ...
/>

Answer 7

        <FlatList
            .....
            showsHorizontalScrollIndicator={false}
        />

只需添加此代码

Answer 8

FlatList 继承自 VirtualizedList。VirtualizedList 继承自 ScrollView。因此，您可以使用 ScrollView 道具在 FlatList 中隐藏滚动条指示器。

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