108

我正在尝试在我的应用程序中使用 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;
4

8 回答 8

231

只需添加

showsHorizontalScrollIndicator={false}
于 2017-05-16T03:41:13.207 回答
112

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

<ScrollView
  showsVerticalScrollIndicator={false}
  showsHorizontalScrollIndicator={false}
 />
于 2020-05-13T06:57:56.120 回答
27

如果您试图隐藏垂直滚动条,请使用:

showsVerticalScrollIndicator={false}
于 2020-01-28T15:31:04.780 回答
12
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}
  ...
/>
于 2021-01-22T09:07:18.690 回答
7

试试这个使 ListView 水平添加 (horizo​​ntal={true}) 下面提到,如果你只想隐藏滚动条,只需添加 (showsHorizo​​ntalScrollIndicator={false})

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

/>

于 2017-06-01T11:06:46.523 回答
4

隐藏垂直滚动条

showsVerticalScrollIndicator={false}

隐藏水平滚动条

showsHorizontalScrollIndicator={false}

(在您的 FlatList 组件中添加这些道具。)

于 2020-07-22T03:31:01.417 回答
2
<ScrollView showsVerticalScrollIndicator ={false}/>
于 2020-10-20T13:02:14.640 回答
1

在 FlatList 和 ScrollView 你可以添加showsHorizontalScrollIndicator={false}道具

于 2021-06-28T08:25:55.273 回答