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

时间:2017-05-15 20:06:09

标签: react-native react-native-flatlist

我正在尝试在我的应用中使用FlatList(React-native)。我正在水平使用它,可以看到滚动条。 ScrollView中有一个选项可以隐藏滚动条但不能隐藏在FlatList中。有没有人能够以其他方式隐藏它。我尝试使用parent& amp;的解决方案。子容器(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;

8 个答案:

答案 0 :(得分:79)

添加

showsHorizontalScrollIndicator={false}

答案 1 :(得分:17)

如果您要隐藏垂直滚动条,请使用以下方法:

showsVerticalScrollIndicator={false}

答案 2 :(得分:14)

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

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

答案 3 :(得分:6)

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

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

/&GT;

答案 4 :(得分:6)

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 :(得分:1)

隐藏垂直滚动条

showsVerticalScrollIndicator={false}

隐藏水平滚动条

showsHorizontalScrollIndicator={false}

(将这些道具添加到FlatList组件中。)

答案 6 :(得分:0)

<ScrollView showsVerticalScrollIndicator ={false}/>

答案 7 :(得分:0)

在 FlatList 和 ScrollView 中都可以添加 const { series, src, watch, dest, parallel } = require('gulp'); const sass = require('gulp-sass') const webp = require('gulp-webp'); const paths = { scss: 'src/scss/**/*.scss', js: 'src/js/**/*.js' } function css() { return src(paths.scss) .pipe(sass()) .pipe(dest('./build/css')) } function javascript() { return src(paths.js) .pipe(concat('bundle.js')) .pipe(dest('./build/js')) } function watchArchivos() { watch(paths.scss, css); // * = La carpeta actual - ** = Todos los archivos con esa extensión watch(paths.js, javascript); } exports.css = css; exports.javascript = javascript; exports.watchArchivos = watchArchivos; exports.default = series(css, javascript, watchArchivos); 道具